2021/4/20ツイートシェアB!はてブポケットこんにちは、ゆんつです。WordPressのオリジナルテーマ作成の第5回目です。WordPressのテーマを作成する」を、何回かに分けてやっています。WordPressのテーマを作成する」は、具体的には以下のような作業内容となり、現在までのところ1~5が終了しています。style.cssにテーマ情報を記述するfunctions.phpを作成するheader.phpを作成するfooter.phpを作成するメニューを作成するサイドバーを作成するindex.phpを完成させるsingle.phpを完成させるpage.phpを完成させる404.phpを完成させる前回は、header.phpやfooter.phpを作成し、それらを呼び出して表示するようにしました。サイドバーを作成する」を進めます。サイドバー部分の作成は、テーマファイルにサイドバーのコードを直接記述する方法もありますが、今回はWordPressの特性でもあるウィジェットを使う方法でサイドバーを作成したいと思います。ウィジェットを使ったサイドバーには必要に応じてウィジェットを追加・削除できるというメリットがあります。サイドバーのコードを直接記述した場合には、サイドバーに変更がある場合には、いちいちコードを編集しなければなりません。ウィジェットを使ったサイドバーなら、コードを編集しなくても、ウィジェットにより気軽にサイドバーへの追加や削除が行えます。上記の点を踏まえて、今回はウィジェットでサイドバーを作成したいと思います。次回に続きますウィジェットの設定を行うサイドバーに必要なウィジェットを追加して、設定を行います。プロフィール欄プロフィール欄は「カスタムHTML」ウィジェットを使って作りましょう。ウィジェット画面でカスタムHTMLをサイドバーに追加してください。class="profile">~</div>までをコピーしてください。コピーしたらウィジェット画面に戻り、カスタムHTMLのタイトルに「プロフィール」と入力し、内容部分にコピーしたコードを貼り付けてください。貼り付けたコードは見た目が汚いので、見やすいように整形して下さい。ウィジェットに貼り付けたコードをキーボードのCTRL+Aですべて選択して、キーボードのCTRLキーを押しながら[キーを4回押すと以下のように整形されます。貼り付けたコードにはプロフィール画像を読み込むimgタグがあります。このimgタグのsrcに記述されているパスでは、プロフィール画像を読み込むことができないので、プロフィールには画像が表示されません。プロフィールに画像が表示されるようにパスを修正します。プロフィールのカスタムHTMLウィジェットをいったん保存してください。WordPressの管理画面で「メディア」をクリックし、メディアライブラリ画面でプロフィール画像をクリック。「添付ファイルの詳細」画面になるので、ファイルのURLという項目にある「URLをクリップボードにコピー」ボタンをクリック。URLのコピーが完了したら、カスタムHTMLウィジェットで作成したプロフィールに戻ります。コピーしたURLをimgタグのsrcに貼り付けて、「保存ボタン」をクリック。これによりカスタムHTMLで作成したプロフィール欄に画像が表示されます。以上で、プロフィール欄のウィジェットの作成は完了です。検索欄は、「検索」ウィジェットをサイドバーに導入し、タイトルを「検索」にして保存するだけで完了です。カテゴリーカテゴリーは、まずカテゴリーを作成して、そのあとでカテゴリーウィジェットを設置します。カテゴリーを作成まずはWordPressでカテゴリーを作成しましょう。管理画面から「投稿」⇒「カテゴリー」をクリックします。カテゴリー画面が開くので、カテゴリー名を入力して、「新規カテゴリーを追加」ボタンをクリックして新規カテゴリーを追加していきます。ここでは、カテゴリー名を「カテゴリー1」~「カテゴリー4」まで作成してください。ゆんつスラッグ部分は今回は未入力でいいです以上でカテゴリーづくりは完了なのですが、「Uncategorized」は今回のテーマ作りで不要なので削除しましょう。投稿設定画面で、「投稿用カテゴリーの初期設定」をUncategorized以外のカテゴリーに変更して、「変更を保存」ボタンをクリックします。カテゴリー画面に戻り、「Uncategorized」を削除します。これで、カテゴリーにはカテゴリー1~4だけになりました。以上でカテゴリーづくりは完了です。カテゴリーウィジェットの追加カテゴリーは、カテゴリーウィジェットをサイドバーに追加し、タイトルを「カテゴリー」として「保存」ボタンをクリックして完了です。サイドバーウィジェットを表示できるようにするサイドバーウィジェットを設定しましたが、まだ設定しただけでWEBサイトに表示するようにはなっていません。これから、サイドバーウィジェットを、WEBサイトに表示できるようにします。class="aside">~</aside>の間にある要素をすべて削除します。サイドバーウィジェットを表示するにはis_active_sidebar()dynamic_sidebar()を利用します。class=”aside”>~</aside>の間)に、サイドバーウィジェットを表示する以下のコードを記述します。dynamic_sidebar('sidebar');}?>is_active_sidebar()は、引数に設定したIDに該当するサイドバーウィジェットにウィジェットが入っているかどうかを確認する関数です。functions.phpでサイドバーウィジェットを有効化したときのことを思い出してください。その時に有効化したサイドバーウィジェットの'id'は'sidebar'で設定しています。これを引数に使用して、サイドバーウィジェットにウィジェットが入っているかどうかを確認しています。dynamic_sidebar()は、引数で設定したIDに該当するサイドバーウィジェットを表示するための関数です。サイドバーウィジェットのIDは'sidebar'なので、それを引数に設定することで、今回作成したサイドバーウィジェットが表示されるようになります。WEBサイトを確認するWEBサイトを確認してみてください。ウィジェットで作ったサイドバーが、きちんと表示されているはずです。カテゴリーが「カテゴリー1」しかありませんが、これはカテゴリー1以外のカテゴリーに紐づいた投稿記事がまだ存在しないことが原因です。今後ダミーの記事を作成して、その記事を各カテゴリーに紐づけていくことでカテゴリー1~4まで表示されるようになります。サイドバー部分をsidebar.phpに切り出す現在、サイドバーを表示するコードはindex.phpに直接記述しています。このサイドバーを表示するコードも、前回のheader.phpやfooter.phpのように切り出して、関数を使って呼び出せるようにしてみましょう。サイドバーウィジェットを表示するために記述したPHPのコードを切り取ります。コードエディタで新規ファイルを作成し、切り取ったコードを貼り付けます。「sidebar.php」というファイル名で保存します。sidebar.phpを読み込むにはget_sidebar()を利用します。class="aside">~</aside>の間)に、以下のコードを記述。?>get_sidebar()は、記述した場所にsidebar.phpを読み込む関数です。WEBサイトを確認してみるとサイドバーウィジェットで作成したサイドバーが表示されていると思います。他のページも同様に変更してください以上でサイドバーの作成は完了です。現在はindex.phpだけの編集が完了しておりsingle.phppage.php404.phpはまだ編集が終わっていません。?>をコピペしておいてください。以上で作業は完了です。次回に続きます今日はサイドバーウィジェットを使ってサイドバー部分を作成し、それをsidebar.phpに切り出し、WEBサイトに表示するようにしました。今回のポイントはサイドバーウィジェットはis_active_sidebar()でウィジェットがあるかどうかの有無を確認し、dynamic_sidebar()で表示するという部分です。これさえ抑えておけば、サイドバーに限らず、好きな場所にウィジェットを表示することが出来るようにります。次回はWEBサイトの顔となるindex.phpを作成したいと思います。Checker」WordPressのオリジナルテーマを作成しよう4~header.phpとfooter.phpを作る~同じカテゴリの一覧へツイートシェアB!はてブポケットプロフィールゆんつと申します。コーディングやWordPress、プログラミングで実践した事について書いています。どこかの誰かに、又、自分で読み返したときに役立つ情報が書ければいいなと思います。このブログ以外にも「こんぷれ」という雑記ブログもやっているので、もしよかったらそっちも見てくれると嬉しいです。