WordPressにショートコードで挿入出来るウィジェットを作ろう!

これまた自分用に覚え書きです。
Wordpressの投稿・固定ページにショートコードで挿入出来るウィジェットを作る方法です。

function.phpに以下のコードを記載

function.phpを編集する際は十分ご注意ください。
必要なコードが消えてしまうとサイトが真っ白になる可能性もあります。
(その際の責任は負えません)
<?php ?>内に書いてください。

//カスタムウィジェットを作る
register_sidebar(array( 'name' => 'カスタムウィジェット', 'id' => 'widget_custom',
	'before_widget' => '<div class="custom-widget">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widgettitle">',
    'after_title'   => '</h3>',
	)
	);
//カスタムウィジェットを呼び出すショートコードを作る
if ( !function_exists( 'widget_custom' ) ) {
    function widget_custom() {
        ob_start();
        dynamic_sidebar( 'widget_custom' );
        $osc = ob_get_clean();
        return $osc;
    }
    add_shortcode( 'w_custom', 'widget_custom' );
}

完成!

これで、カスタムウィジェットとショートコードができました。

投稿中に

というショートコードを書くと、その部分にカスタムウィジェットが書き出されます!

 

複数のカスタムウィジェットを作る場合は?

ちなみに複数のカスタムウィジェットとショートコードを作る場合はこんな感じです。

//カスタムウィジェットを作る
add_action(
	'widgets_init', 
	function(){
		register_sidebar(array(
			'id' => 'widget_01',
			'name' => 'ウィジェット1',
			'before_widget' => '<div class="widget-01">',
			'after_widget'  => '</div>',
			'before_title'  => '<h3 class="widgettitle">',
			'after_title'   => '</h3>',
		));
		
		register_sidebar(array(
			'id' => 'widget_02',
			'name' => 'ウィジェット2', 
			'before_widget' => '<div class="widget-02">',
			'after_widget'  => '</div>',
			'before_title'  => '<h3 class="widgettitle">',
			'after_title'   => '</h3>',
		));
		
		register_sidebar(array(
			'id' => 'widget_03',
			'name' => 'ウィジェット3', 
			'before_widget' => '<div class="widget-03">',
			'after_widget'  => '</div>',
			'before_title'  => '<h3 class="widgettitle">',
			'after_title'   => '</h3>',
		));
	}
);

//カスタムウィジェットを呼び出すショートコードを作る
if ( !function_exists( 'widget_01' ) ) {
	function widget_01() {
        ob_start();
        dynamic_sidebar( 'widget_01' );
        $osc = ob_get_clean();
        return $osc;
    }
    add_shortcode( 'w_custom01', 'widget_01' );
}

if ( !function_exists( 'widget_02' ) ) {
function widget_02() {
        ob_start();
        dynamic_sidebar( 'widget_02' );
        $osc = ob_get_clean();
        return $osc;
    }
add_shortcode( 'w_custom02', 'widget_02' );
}

if ( !function_exists( 'widget_03' ) ) {
function widget_03() {
        ob_start();
        dynamic_sidebar( 'widget_03' );
        $osc = ob_get_clean();
        return $osc;
    }
add_shortcode( 'w_custom03', 'widget_03' );
}

これで投稿中に[w_custom01][w_custom02][w_custom03]というショートコードを書くと、その部分にカスタムウィジェットが書き出されます!
なにかと便利なウィジェット機能を使い倒していきましょう。



おすすめ