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

Switch language

当Webサイトのコンテンツ内にはアフィリエイト広告、Googleアドセンス広告が含まれます。
広告主によって不適切な広告が表示されていることに気付いた方は、お手数でございますが該当の広告の「×」を押していただき、「この広告の表示を停止」し所定の流れに従ってください。

ウィジェットエリアを追加して表示する方法【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のサーバー移行はこれ一択!】「All-in-One WP Migration」で一発サーバー移行!サーバー移行に苦しむすべてのエンジニアへ。
こんにちは。管理人です。 今回は私も仕事でかなり苦しんだWordPress(ワードプレス)のサイトを他のサーバーへ移行する、とてつもなく簡単
【コピペ可】非プラグイン依存!カスタムフィールド出力の統一した書き方
私が知っているメジャーなカスタムフィールド系プラグインは以下の3つです。 Advanced Custom FieldsSmart Custo
【WordPress】「外観」に「ウィジェット」の項目が表示されないときの対処法
とりあえず後述のソースを functions.php に追記すれば出てきた。 <?php と ?>は必要に応じて消していただいて
特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった
近頃、Chat GPT なるものが話題ですが、私もChat AI 的なサブスクリプションサービスを契約してみました。 お題目にもある通り、そ
Custom Field Suite と Duplicate Post を併用すると起きるバグの解決方法
Custom Field Suite(CFS)と Duplicate Post(DP)を併用すると、記事を複製したときに、記事編集画面では何



コメントを残す

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