プログラミング

WordPressのウィジェットを有効にする方法【コピペするだけ】

にいやん
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名」とか変更して、自分でスタイル当ててみて下さい。

 

にいやん
それでは。よきエンジニアライフを!!

スポンサーリンク




  • この記事を書いた人
つちだ

つちだ ろい

現役のエンジニアです。日々Web制作に勤しみつつ、ブログ更新していきます。ポートフォリオ兼仕事依頼ページも同時に作成中ですのでご期待ください。/東京在住/30歳/フロントエンド/スノボ/バイク/オムライス

-プログラミング

Copyright© 2019-2021 そろりかく。 All Rights Reserved.