hbsprogram.com

thủ thuật wordpress ,vps và mình thích thì mình viết thôi

Cái nhìn thực tế trước khi xem bài này chính là câu hỏi tại sao tôi phải biết dùng short code và nó giúp ích tôi những gì ? Ở bài viết này tôi sẽ giúp bạn hiểu short code là gì và tại sao phải dùng short code.Bạn muốn chèn 1 đoạn văn bản vào bài viết của mình .Ở tầm gần bạn thấy nó cứ lập đi lập lại nhiều lần làm mất năng suất viết bài,ở tầm xa chính là vấn đề thay đổi thông tin hàng loạt đơn cử như việc công ty mình đổi đầu số chẳng hạn .Vấn đề đặt ra làm mình đau đầu đó là thay đổi số tổng đài của hàng ngàn bài viết và thay đổi tên địa chỉ công ty chẳng hạn .Nếu bạn là 1 người viết content thuần thì gặp trường hợp này nản luôn vì phải vào chỉnh tay từng bài 1 .Đó là việc không tưởng chính vì vậy trước khi xây dựng website bạn nên dùng short code để cho code của mình dễ bảo trì và giúp đỡ cho các bạn viết content 1 cách tối đa nhất có thể

Cách làm 1 plugin embel video facebook vào bài viết .

Tạo 1 folder trong mục plugin của wordpress .Sau đó copy đoạn code sau vào file index.php của thư mục đó

<?php
/*
 * Plugin Name: Embel Video Facebook
 * Plugin URI: http://facebook.com/hienk8ccntt
 * Description: Ember video facebook vào website 
 * Version: 1.0
 * Author: Nguyễn Anh Hiến
 * Author URI: http://facebook.com/hienk8ccntt
 * License: Under the GPL v2 or later
 */

// ember video facebook
function ember_facebook($args, $content) {
	$content = '
			<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6&appId=772162519547056";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, "script", "facebook-jssdk"));</script>
			<div class="fb-video" data-href="' . $content . '" data-width="500" data-show-text="false"><blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a><p>How to share with just friends.</p>�ược đăng bởi <a href="https://www.facebook.com/facebook/">Facebook</a> 5 Tháng 12 2014</blockquote></div>';
	return $content;
}
add_shortcode ( 'facebookember', 'ember_facebook' );

Sau đó vào wp-admin kích hoạt plugin mới cài vào lên

Cách dùng .Bạn tạo 1 post mới trong phần content bạn thêm code như sau

[facebookember]https://www.facebook.com/hoathinhhaycom/videos/1845977838967567/[/facebookember]

Public bài viết và cảm nhận nhé .

Thế là đã xong 1 plugin cơ bản .Vấn đề ở đây là bạn phải viết [facebookember] bằng tay vào code như vậy là không ổn .Mất thời gian giờ chúng ta phải nghĩ các tối ưu bằng cách tạo 1 nút khi ấn vào sẽ tự động chèn đoạn code

[facebookember][/facebookember]

vào trong bài viết .Ở đây mình viết 2 file đầy đủ như sau .Bạn có thể tham khảo nhé

File index.php

<?php
/*
 * Plugin Name: Embel Video Facebook
 * Plugin URI: http://facebook.com/hienk8ccntt
 * Description: Ember video facebook vào website 
 * Version: 1.0
 * Author: Nguyễn Anh Hiến
 * Author URI: http://facebook.com/hienk8ccntt
 * License: Under the GPL v2 or later
 */

// thêm nút add phim vào trong visual editor
function enqueue_plugin_scripts($plugin_array) {
	// enqueue TinyMCE plugin script with its ID.
	$plugin_array ["green_button_plugin"] = plugin_dir_url ( __FILE__ ) . "index.js";
	return $plugin_array;
}

add_filter ( "mce_external_plugins", "enqueue_plugin_scripts" );
function register_buttons_editor($buttons) {
	// register buttons with their id.
	array_push ( $buttons, "addmovie" );
	return $buttons;
}
add_filter ( "mce_buttons", "register_buttons_editor" );

// ember video facebook
function ember_facebook($args, $content) {
	$content = '
			<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6&appId=772162519547056";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, "script", "facebook-jssdk"));</script>
			<div class="fb-video" data-href="' . $content . '" data-width="500" data-show-text="false"><blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a><p>How to share with just friends.</p>�ược đăng bởi <a href="https://www.facebook.com/facebook/">Facebook</a> 5 Tháng 12 2014</blockquote></div>';
	return $content;
}
add_shortcode ( 'facebookember', 'ember_facebook' );

Vào file index.js

(function() {
    tinymce.create("tinymce.plugins.green_button_plugin", {

        //url argument holds the absolute url of our plugin directory
        init : function(ed, url) {

            //add new button     
            ed.addButton("addmovie", {
                title : "Thêm video facebook",
                cmd : "them_phim",
                image : "http://hbsprogram.com/wp-content/uploads/2016/10/Circle_Green.png"
            });

            //button functionality.
            ed.addCommand("them_phim", function() {
                var selected_text = ed.selection.getContent();
				var return_text="[facebookembel][/facebookembel]";
                //var return_text = "<span style='color: green'>" + selected_text + "</span>";
                ed.execCommand("mceInsertContent", 0, return_text);
            });

        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "Extra Buttons",
                author : "Narayan Prusty",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("green_button_plugin", tinymce.plugins.green_button_plugin);
})();

Bạn có thể download plugin dưới đây về cài vào soucre là xong embel_facebook

Hôm sau mình

Leave a Reply

Your email address will not be published. Required fields are marked *