WordPressテーマ作成で任意の場所にウィジェットを追加する方法

Programming

今回がWordPressでオリジナルテーマを作成する際に必要となってくるであろうウィジェットの作成方法について解説します。

ウィジェットとはテーマに組み込まれているGUI(Graphical User Interface)で操作可能なコンテンツ配置部分の事です。

WordPressをインストールした初期の状態では「カスタムHTML」や「画像」「カテゴリー」などのウィジェットに入る要素部分は用意されていますが、重要な配置場所が用意されていません。その部分は自身でphpファイルを編集して追加しなくてはいけません。

今回はその方法を紹介します。

ウィジェットの有効化設定

ウィジェットの有効化するにはfunction.phpに以下のように記述します。
この設定によって先程の管理画面にGUIが追加されます。

// ウィジェットの有効化・設定
function theme_slug_widgets_init()
{
// サイドバー汎用
    register_sidebar(array(
'name' => 'サイドナビ',
'id' => 'sidenavi',
'before_widget' => '<div class="side_widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_widget_title">',
'after_title' => '</h2>',
));
// スクロール追従
    register_sidebar(array(
'name' => 'サイドバースクロール追従',
'id' => 'stickyzone',
'before_widget' => '<div class="side_widget sticky">',
'after_widget' => '</div>',
'before_title' => '<h2 class="side_widget_title">',
'after_title' => '</h2>',
));
// バナー
    register_sidebar(array(
'name' => 'バナーエリア',
'id' => 'bannerzone',
'before_widget' => '<div class="top_widget img_banners">',
'after_widget' => '</div>',
'before_title' => '<h2 class="top_widget_title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'theme_slug_widgets_init');

「register_sidebar」関数はウィジェットを作成するための関数です。ウィジェットは通常サイドバーに使用するものという想定なのでこのような名前になっています。

上記で作成したウィジェットを実際のWEBサイトで表示するには、表示したいページのファイル内に以下の記述をして下さい。

<!-- サイドバー汎用ウィジェット -->
<?php dynamic_sidebar('sidenavi'); ?>
<!-- スクロール追従ウィジェット -->
<?php dynamic_sidebar('stickyzone'); ?>
<!-- バナーウィジェット -->
<?php dynamic_sidebar('bannerzone'); ?>

「dynamic_sidebar」関数の(”)の中に先程 function.phpで作成した際のid名を入れれば指定したウィジェットが表示されます。その上で、先程の管理画面から任意の要素を持ってきてコンテンツを作成して下さい。するとウィジェットコンテンツが表示されます。

以上が「WordPressテーマ作成で任意の場所にウィジェットを追加する方法」でした。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました