WordPressの投稿・固定ページにショートコードで挿入出来るウィジェットを作ってみた

実はこれSTINGER系テーマの micata2 をイジっている時にいいと思った「オリジナルのショートコード作成ウィジェット」という機能なんですが、micata2ではウィジェットに設定した内容をテンプレートを使って挿入していたので、それを子テーマの functions.php だけで出来るようにしてみました。

例によって「素人が見よう見まねでとりあえず出来た」というレベルのモノですので、ご利用は自己責任という事でお願いしたいですが、失敗してもWordPressが真っ白になるくらいなのでノープロブレムですね?

スポンサーリンク

カスタムショートコードの作り方

とか言っておいて今更こんな事を言うのもアレですが、いくつかのテーマで動作確認はしてありますのでその点はご安心を。

確認済みのテーマ

  • Simplicity
  • Luxeritas
  • STINGER PLUS+
  • STINGER8
  • micata2
  • Sentry
  • Xeory Base
  • Emanon Free

恐らくここに挙げていないテーマでも問題は無いかと思います。

ウィジェットエリアの作成

出来ればイジりたくないファイルの functions.php を編集する事になりますが、慣れてしまえばどうという事はありません。その内に真っ白画面がなんぼのもんじゃいと思えるようになるでしょう。

私はもう飽きるくらい見てますからね、HAHAHA

※必ず functions.php のバックアップを取ってから作業して下さい。

やる事はいたって簡単で functions.php に以下のコードをコピペするだけです。

if ( function_exists( 'register_sidebar' ) ) {
    register_sidebar( array(
        'id' => 'custom-sc',
        'name' => 'カスタムショートコード用ウィジェット',
        'description' => 'カスタムショートコード用のウィジェットです。',
        'before_widget' => '<div class="custom-sc">',
        'after_widget' => '</div>',
        'before_title' => '<p>',
        'after_title' => '</p>'
    ) );
}

if ( !function_exists( 'custom_sc' ) ) {
    function custom_sc() {
        ob_start();
        dynamic_sidebar( 'custom-sc' );
        $osc = ob_get_clean();
        return $osc;
    }
    add_shortcode( 'customsc', 'custom_sc' );
}

<div> や <p> のタグは好みで変えていただいて結構です。一番最後の customsc はショートコードの呼び出しに使う部分になるので、そこも自分が使いやすい名前に変更してOKです。

ウィジェットの設定

functions.php に記述した内容に間違いが無ければ、こんな感じでカスタムショートコード用のウィジェットエリアが増えているはずです。ここでは例としてテキストウィジェットを設定してみる事にします。

カスタムショートコードウィジェットの設定

中身はCTAっぽいコンテンツでもAdSenseの広告コードでも何でもOKですが、あくまでもウィジェットに設定された内容をそのまま表示するだけなので、必要に応じてタグで囲ったりして下さい。もちろん、テキストウィジェットに限らずカテゴリーでもタグクラウドでも好きなように放り込む事が出来ます。

ちょっとしたコンテンツを作りたい場合は、投稿や固定ページでプレビューしながら作成して、完成したところでテキストエディタからタグごとごっそりコピペするとそれっぽくなりますのでご参考までに。

ショートコードの呼び出し

通常のショートコードと同様で、ウィジェットに設定した内容を表示させたい場所で [customsc](変更していればその名前)を記述するだけで利用出来ます。

カスタムショートコードの呼び出し

この例だと見出し1と見出し2の間に表示されます。

カスタムショートコードの表示

一応表示はされましたが、何だかパっとしないサンプルでしたね…ちなみにタイトルが不要な場合は入力しなければ表示されません。

人気記事のウィジェットを挿入する事も出来ますので、フロントページにカテゴリー毎の人気記事を表示というような使い方もやろうと思えば出来なくはないかと思います。

カスタムショートコード 人気記事を表示してみる

使い方はアイデア次第

他のテーマから拝借した機能なのでオリジナリティには欠けますが、使いようによってはなかなか便利ではないでしょうか。複数のウィジェットエリアを用意して使い分けたい場合は、名前が被らないように必要な数だけコピペして増やす事も出来ます。

何と言っても比較的簡単に実装する事が可能なので、複雑なカスタマイズはノーサンキューという方にもオススメ出来るのではないかと思います。

スポンサーリンク
トップへ戻る