Wordpress

Webページにウィジェットエリアを自作する方法【WordPress】【php】

  1. HOME >
  2. Wordpress >

Webページにウィジェットエリアを自作する方法【WordPress】【php】

Webページにウィジェットエリアを自作する方法【WordPress】【php】

ウィジェットエリアを自作する

  • ウィジェットを追加するエリアを自作したい。
  • Webページに作成したエリアをウィジェットエリアとして扱いたい。

ココがポイント

結論:
関数「register_sidebar()」を使用するとウィジェットエリアを追加・関数「dynamic_sidebar()」を使用するとWebページの任意の場所にウィジェットを出力することができる。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、WebページにHTMLで自作したエリアに、WordPressのウィジェットを追加できるようにしてみたいと思ったことはございませんか?

今回は、PHPを使用することで、自作したWebページのエリアを、ウィジェットエリアとして使用できるようにする方法をご紹介しようと思います。この方法で追加したウィジェットエリアには、WordPressで使用できるウィジェットを全て登録できます。Webページカスタマイズの手助けとなってくれるでしょう。

 

1.PHPコードを追加できるプラグイン

プラグイン「Code Snippets」をインストールすると、functions.phpを直接編集しなくても、PHP関数を追加したり、WordPress のファイルに定義されている便利な PHP 関数を利用することができます。

今回ご紹介するPHPコードはfunctions.phpに追加する形でも動きますが、私と同じようにPHPプログラミン初心者の方は、ミスタイプなども発見できるプラグイン「Code Snippets」を使用すると、自作のカスタマイズがよりやりやすくなるでしょう。

もっと詳しく

 

2.「ウィジェットエリア」を追加

ウィジェットエリア

add_action( 'widgets_init', function() {
  register_sidebar( array(
    'name' => 'ウィジェットのエリア名',
    'id' => 'widget_id001',
    'description' => 'ウィジェットエリアについての説明を書きます',
  'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title'  => ''
  ));
  register_sidebar( array(
    'name' => 'ウィジェットのエリア名',
    'id' => 'widget_id002',
    'description' => 'ウィジェットエリアについての説明を書きます',
  'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title'  => ''
  ));
});

上記コードを「ウィジェットエリア」追加用として作成したスニペットにコピー&ペーストします。
スニペットが動作する場所は「Run snippet everywhere(すべての場所(ダッシュボードとフロントエンド)で実行)」を選択します。「すべての場所で実行」させることでダッシュボードで登録したウィジェットをフロントエンドに表示することができます。

 

コードの役割について

ウィジェットエリアを複数追加できる

関数「register_sidebar()」を複製することで、ウィジェットエリアを複数追加することができます。

ウィジェットエリアの「タイトル」と「説明文」

追加されたウィジェットエリア

「'name'」キーで指定した値「'ウィジェットのエリア名'」がタイトル」に、「'description'」キーで指定した値「'ウィジェットエリアについての説明を書きます'」が「ウィジェットエリアの説明文」にそれぞれ対応しています。

'id'の値には大文字を使用しない

「'id'」キーの値には大文字を使用しないようにします。大文字を使用すると自作したウィジェットエリアにウィジェットを登録することができなくなります。

デフォルトで設定されている要素を削除

関数「register_sidebar()」内の「'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => ''」でデフォルトで設定されている要素をなしにしています。デフォルトだとウィジェット要素は<li>要素で囲まれ、タイトルは<h2>要素で囲まれています。ウィジェットエリアを作成し、CSSで体裁を設定するときにはデフォルトの要素をこの方法で削除しておくとよいでしょう。

 

「register_sidebar()」の詳細一覧

配列のキー キーに対応する値
name サイドバーの名前。ウィジェット管理画面に表示される。
id サイドバーの ID(すべて小文字の半角英数字)。
description サイドバーの説明テキスト。ウィジェット管理画面に表示される。
class サイドバーに割り当てられるCSS クラス。指定したクラス値の前に "sidebar" が付きます。
before_widget ウィジェットの直前に出力する HTML テキスト。
after_widget ウィジェットの直後に出力する HTML テキスト。
before_title タイトルの直前に出力する HTML テキスト。
after_title タイトルの直後に出力する HTML テキスト。

 

3.HTML内にウィジェットを出力

add_action( 'wp_footer', function () { ?>
<?php if ( is_active_sidebar('widget_id001') ) : ?>
  <div class="custom">
    <?php dynamic_sidebar('widget_id001'); ?>
  </div>
<?php endif; ?>
<?php } );

上記のPHPコードをコピー&ペーストします。

プラグイン「Code Snippets」を使用したときは、スニペットが動作する場所を「Run snippet everywhere(すべての場所(ダッシュボードとフロントエンド)で実行)」もしくは「Only run on site front-end(フロントエンド(作成したWebページ)のみで実行)」を選択します。

コードの役割について

1行目:wp_footerアクション

「footer」タグ内に以下のコードを出力します。

wp_headアクションを使用すると、「head」タグ内にコードを出力することができます。

もっと詳しく

2行目:is_active_sidebar('widget_id001')

このプログラムで「2.「ウィジェットエリア」を追加」で指定した'id'の値(今回は「'widget_id001'」)のウィジェットエリアがアクティブになっているかを確認しています。アクティブになっていれば「if」で囲んだコードを表示し、アクティブでなければ「if」で囲んだコードを非表示にします。

3・5行目:<div>

<?php ?>で囲まれていない部分は、HTMLコードを記述できます。この方法を使用することで、自作のエリアをWebページに作成することができます。

今回は、<div>タグで囲んでいるだけですが、いろいろな要素を追加してWebページをカスタマイズしましょう。

4行目:<?php dynamic_sidebar('widget_id001'); ?>

関数「dynamic_sidebar()」でウィジェットを出力します。「dynamic_sidebar()」の引数(今回は「'widget_id001'」)で、「register_sidebar()」で追加したウィジェットエリアの'id'の値を参照し出力しています。

 

もっと詳しく

 

まとめ

お疲れ様でした。

関数「register_sidebar()」を使用するとウィジェットエリアを追加することができます。また、関数「dynamic_sidebar()」は、追加したウィジェットエリアに登録したウィジェットを、Webページの任意の場所に出力することができる関数になります。

この2つの関数を利用することで、WordPressでのWebページのカスタマイズの幅が広がることでしょう。

もっと詳しく

WordPressでのPHPコードの使い方について、非常にわかりやすく記載されている冊子があります。これを読めば、WordPressでどのようにPHPが使用されているのかや、HTMLにPHPコードを合わせるときの独特の記入の仕方もわかり、PHPをより使いやすくなるでしょう。

「WordPressで学ぶPHP」は全4巻の冊子ですが、Kindle版では一冊500円で読むことができます。また、月額980円でKindle Unlimited に登録すると、「WordPressで学ぶPHP」を全冊読み放題で読むことができ、WordPressでのPHPの使い方を学ぶのに役に立つことでしょう。

下記の「WordPressで学ぶPHP ①変数・制御構造編」にWordPress独自のPHPの書き方が載っているので、この一冊を読むだけでも、他の記事に書かれているPHPの応用方法が理解できるようになるので、おすすめの一冊だと思います。

最後までご一読いただき、ありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.