にぃやん
WordPressのテーマ開発には必須のウィジェットについて書く！！
この記事は下記の方に向けて書きます。
この記事の内容
・WordPressのテーマ開発でウィジェットを有効にしたい
・簡単にWordPressのテーマ開発をしていきたい
ここでこの記事を書く僕のことを紹介しておきます。
現役のフロントエンドエンジニアをしています。現在はWordPress開発の仕事もしてるので、この記事の信用度も増してると思います。自分のサイトもテーマを自作しています。
僕はWordPressの開発でいろいろ調べて、困ったともたくさんあったので
この記事ではなるべくわかりやすく説明します。
WordPressのウィジェットを有効にする方法
それでは、さっそく使用するコードは下記です。
テーマ配下の「function.php」に下記のコード書くだけ。
「function.php」がまだないなら、この時に作成しておきます。
/* ---------------------------------------
ウィジェットの有効化・設定
--------------------------------------- */
function my_theme_widgets_init() {
register_sidebar(array(
'name' => 'サイドウィジェット',
'id' => 'side_widget' ,
'before_widget' => '<div class="side_widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget_title">',
'after_title' => '</h2>'
));
register_sidebar(array(
'name' => 'フッターウィジェット',
'id' => 'footer_widget' ,
'before_widget' => '<div class="footer_widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget_title">',
'after_title' => '</h2>'
));
}
add_action( 'widgets_init', 'my_theme_widgets_init' );コピペするだけではまだ使えません。
あとは使いたいところで、下記のコードを書きます。
サイドウィジェット使うなら
PHP
<?php dynamic_sidebar('side_widget'); ?>
フッターウィジェット使うなら
PHP
<?php dynamic_sidebar('footer_widget'); ?>
まとめ
以上になります。
上のコードを基本的にはコピペするだけでウィジェットを使用できるようになります。
アレンジする場合とかは中に入れている
「class名」とか変更して、自分でスタイル当ててみて下さい。
にぃやん
それでは。よきエンジニアライフを！！
