初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

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

> WordPress

こんにちは。

今回はワードプレスでウィジェットエリアを追加し、追加したウィジェットを表示する方法について紹介したいと思います。

それでは、いつも通り、まずは結論から。


functions.phpを編集してウィジェットエリアを追加する

WordPressの管理画面の左サイドにあるメニューの、

[外観] → [テーマの編集]

に進み、右サイドの「テーマファイル」の中から「テーマのための関数(functions.php)」をクリック。

もちろん、FTPソフトを使ってサーバーと接続してfunctions.phpファイルを直接編集してアップロードする方法でも問題ありません。

そして、そのファイルのどこでもいいので下記のソースを入力します。

register_sidebar( array('name' => 'widget_name' ,
 'id' => 'widget_area' ,
  'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 'after_title' => '</h3>'
));




追加したウィジェットを表示する方法

では、続いて、上記ソースの解説と追加したウィジェットを表示する方法を紹介します。

'name' => 'widget_name' 

は管理画面のウィジェットエリアの名前として表示されるものです。

widget_name」の部分をお好みのウィジェットエリア名に変更しましょう。




'id' => 'widget_area'

widget_area」の部分をお好みのidに変更しましょう。

これが、ウィジェットを表示するために必要なIDとなります。

ウィジェットエリアを表示したい場所に

<?php dynamic_sidebar('widget_area'); ?>


と記述することでこのウィジェットエリアを表示することができます。


'before_widget' => '<div class="widget">'  と 'after_widget' => '</div>'

は、このウィジェットエリアを囲むタグを設定しています。

この場合、

<div class="widget">
 <!-- ウィジェットエリアの中身 -->
</div>

のように出力されます。


'before_title' => '<h3>'
'after_title' => '</h3>'

は、このウィジェットエリアに導入する各ウィジェットのタイトルを囲むタグを設定しています。

まとめ

それぞれのソースの意味の解説は以上です。

今回紹介したソースをそのまま使ってウィジェットを表示する場合、

<div class="widget">
 <h3><!-- 各ウィジェットのタイトル --></h3>
 <!-- ウィジェットコンテンツが出力される -->
</div>

のように出力されます。



関連記事

サーバーを圧迫する画像を圧縮するプラグイン「Compress JPEG & PNG images」が神ってる件について
こんにちは。管理人です。 私のようなドケチな人にとっては、サーバー代やドメイン代でさえもったいないと感じます。 (そのせいでアドセンスの認証
【WordPress】必ず入れるプラグインと設定【随時更新】
こんにちは。TechStock管理人です。 今回は、Wordpressでwebサイトを作る際に必ずと言っていいほど導入する、プラグインを紹介
【コピペ可】非プラグイン依存!カスタムフィールド出力の統一した書き方
私が知っているメジャーなカスタムフィールド系プラグインは以下の3つです。 Advanced Custom FieldsSmart Custo
【悲報】※ワードプレス クラシックエディタ終了のお知らせ※エディタを切り替えれない・・・
いつのまにかテキストエディタとビジュアルエディタを切り替えれなくなった・・・ この問題に直面してから解決策を探してgoogle先生にいろいろ
【wordpressのサーバー移行はこれ一択!】「All-in-One WP Migration」で一発サーバー移行!サーバー移行に苦しむすべてのエンジニアへ。
こんにちは。管理人です。 今回は私も仕事でかなり苦しんだWordPress(ワードプレス)のサイトを他のサーバーへ移行する、とてつもなく簡単
【WordPress】「外観」に「ウィジェット」の項目が表示されないときの対処法
とりあえず後述のソースを functions.php に追記すれば出てきた。 <?php と ?>は必要に応じて消していただいて



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です