【WordPress】 自作テーマ 05:ウィジェットを追加できるようにする sidebar.php

  • 投稿 : 2016-11-25
  • 更新 : 2020-11-18

本記事は広告およびアフィリエイトプログラムによる収益を得ています

手順

01:作るときに、最低限必要なファイルについて
02:記事ページ/固定ページを作成する
03:header.php/footer.phpを作成する
04:コメント欄 comments.phpを作成する
05:ウィジェットを追加できるようにする sidebar.php <=今回
06:記事の一覧関連を作成する 

方針

Twenty Twelve — 無料の WordPress テーマ

上記のテーマの sidebar.php、functions.phpを参考に型枠を作ります。

sidebar.php

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="secondary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- .widget-area /#secondary-->
<?php endif; ?>

関数リファレンス/is active sidebar - WordPress Codex 日本語版
関数リファレンス/dynamic sidebar - WordPress Codex 日本語版

sidebar.phpにウィジェットを配置したい位置に上記のようなコードを埋め込みます。「sidebar-1」で識別していて、フッターとかそういう場所にも配置したい場合は、footer-1みたいに識別名をべつにして似たようなコードを書けばOKです。

functions.php

add_action( 'widgets_init', 'my_template_widgets_init' );
if ( ! function_exists( 'my_template_widgets_init' ) ) :
function my_template_widgets_init() {
    register_sidebar( array(
        'name'          => 'メインサイドバー',
        'id'            => 'sidebar-1',
        'description'   => 'メインサイドバー',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
endif; // if function_exists

関数リファレンス/register sidebar - WordPress Codex 日本語版

functions.phpにも上記のようなもを追加する必要があります。「 'id'=> 'sidebar-1'」の部分が、先ほどの識別名と同じにしてください。

この状態で、Wordpressの管理画面の「外観」->「ウィジェット」をみれば、メインサイドバーという名前で、ウジェットを追加できる領域が出来ているのはわかるかと思います。
よく理解できなくても、定型文だとおもってコピペすればOKだと思います。


追記:テーマ作りたい人は、本買ったほうが早いかも

追記:2018/04/16

参考:【書籍レビュー】WordPress 仕事の現場でサッと使える!デザイン教科書 – ブログ運営のためのブログカスタマイズ

参考:【書籍レビュー】エンジニアのためのWordPress開発入門 – ブログ運営のためのブログカスタマイズ

標準テーマやネットでいろいろ調べながら作成しましたが、あとから本を読んでみて、上記の2つのどちらかを購入すれば時間短縮できて、かつそのものズバリかなぁと思いました。前者が多くの人がテーマ作成するのに参考になりそうに思います。テーマの作り方そのままというか、Wordpressをつかってサイト構築するデザイナー向けに書かれてるので、そうなると思います。Amazonのレビューや、実際に書店で内容を確認してもらえれば、とよいかと思います。

スポンサーリンク