Amazon新生活セール開催中!

【WordPress】新しくウィジェットエリアを追加する方法

wordpress-add-widget-area

すいみん
こちらのCGメソッドの記事では新しくウィジェットエリアを追加する方法を紹介します!ウィジェットエリアを追加することによって、よりウィジェットの活用方法の手段が増えます!

どうも!最近はWordPressのカスタマイズにハマって、PHPもいじるようになった、すいみん(@cg_method)です!

SANGOではウィジェットエリア「記事コンテンツ後広告」が「モバイル」と「PC」で別れていてとても親切なのですが、同じウィジェットを入れたい時は2倍の手間がかかるので、新たに「記事コンテンツ後広告(共通)」を追加してみました。
そのやり方の紹介です!

WordPressの新しいウィジェットエリアの追加方法

新しいウィジェットエリアの定義を追加

下記のコードをfunctions.phpに差し込みます。

ポイント
できれば「Code Snippets」のプラグインを介して記述しましょう。
【WordPress】プラグイン無しで機能拡張ができる!「functions.php」のおすすめコードまとめ
register_sidebar( array(
'id' => 'article_content_bottom_widget',
'name' => '記事コンテンツ後広告(共通)',
'description' => '説明文',
'before_widget' => '<div class="custom_sc">',
'after_widget' => '</div>',
) );

以上で外観>ウィジェットに「記事コンテンツ後広告(共通)」が追加されます。

「entry-content.php」のカスタマイズ

  1. FTPでWordPressのデータにアクセスして親テーマの「entry-content.php」(記事本体)のテンプレートをダウンロードしましょう。
    /wp-content/themes/sango-theme/parts/single/entry-content.php
    
  2. テキストエディタで「entry-content.php」を開き一番下に下記のコードを追加します。
    // 記事下広告(共通)
    if( is_active_sidebar('article_content_bottom_widget') && $show_ads ) {
       dynamic_sidebar('article_content_bottom_widget');
    }
    

  3. 編集が終わったら、子テーマの「/parts/single」の中に「entry-content.php」を格納しましょう。

    /wp-content/themes/sango-theme-poripu/parts/single
    
  4. 最後に「記事コンテンツ後広告(共通)」にウィジェットを入れてPCとモバイル両方に表示されるか確認しましょう

    外観>ウィジェットへ。 左上に「記事コンテンツ後広告(共通)」が追加されています。

注意
もし記事を表示してサイトに重大なエラーがありました。と出てしまったら。
落ち着いて、FTPから子テーマにある「entry-content.php」を削除しましょう。
記事が再び親テーマから読み込まれて、表示されるはずです
その後、落ち着いてコードがミスしていないか?見直すとよいです。


WordPressで新しくウィジェットエリアを追加する方法まとめ

FTPでのコピーが手間なのですが、一度子テーマに入れてしまえばいつでもカスタマイズ可能ですね!
新しくウィジェットエリアを追加することで、さらにWordPress、ひいてはブログの表現が広がりそうです。

すいみん
WordPressのテンプレートをいじれるようになると、もっとカスタマイズ沼にハマりそうで・・・


以上、すいみん(@cg_method)でした!