WordPressで自作テーマを作ってブログ運営をしよう Vol.4

Hello World!!
杉山です。

今回は第4回目ということで、サイドバーの作成をしていきましょう。

ブログでは、非常に重要となる部分ですね。

今回することは以下の通りとなります。

  • サイドバーを作成しよう
  • サンプル記事を作ろう

では、さっそく進めていきましょう。

サイドバーを作成しよう

サイドバーとは、私のブログで言ったら、右に位置しているものになります。

これを作っていきましょう。

自分のテーマなので、直接書き込んでもいいのですが今回はダッシュボード画面で自由にカスタマイズできるように動的に作成していきましょう。

では、一番にfunctions.phpを開きましょう。

functions.phpを触るときは気を付けてください。

他の箇所が一文字でも違ったりしてしまうと、完全動かなくなって、もう後戻りができなくなったりしてしまいますので、バックアップを取ってから作業を行うようにしましょう。

それでは以下の項目を、functions.phpの空いている箇所に記入してください。

これは、なんのための記述かと言うと、ダッシュボード画面のウィジェットというエリアを作成し、導入したいものを自由にカスタマイズできるようにするためのコードになります。

では、呪文以外の部分を説明していきましょう。

nameの部分

これは、ダッシュボード画面のウィジェットエリアで表示させる名前になります。ユーザーが分かりやすい名前をつけるといいでしょう。

idの部分

これは、サイドバー全体に指定するidになり。本体のsidebar.phpと紐づけるためにも使用します。

before_widget/after_widgetの部分

それぞれのアイテムで使用したい、id名やclass名を追加することができます。

別々のidとclass名が反映されるように「id=”%1$s”」「class=”%2$s”」と記述し、各ウィジェットごとの名前 及び 各アイテム共通には「sidebar-wrapper」というclass名が反映されるように設定しています。

ということは、 sidebar-wrapperというclass名を触ればcssで装飾もできるということです。

before_title/after_titleの部分

これはアイテムごとにタイトルをつけられた場合に、HTMLタグをつけるために設定しております。今回でいうと、h4タグが付きますね。

これらは自由にカスタマイズすることができるので、余裕のあるかたは好きなidやclass名をつけてみてください。

functions.phpへの記述が終われば、次はsidebar.phpにコードを書いていきましょう。

ダッシュボード画面で設定することと、サイドバーに表示させるのを紐づけるためにPHPを使用しないといけません。

では、sidebar.phpを開いてください。

ここに以下のように記述してみましょう。

たったのこれだけで、実はサイドバーは完成です。

めちゃくちゃ簡単なんです。

<?php dynamic_sidebar( ‘side-widget’ ); ?>この記述が先ほど、functions.phpに記述したものと関連づけています。

()内のside-widgetはfunctions.phpで指定したid名と同じにする必要があり、ここで関連付けでいます。

これで、ダッシュボード画面のウィジェットエリアで導入したものがこちらに反映されるようになります。

では、実際にできているか確認していきましょう。

以下のようにウィジェットエリアへ移動してください。

これが、サイドバーウィジェットになり、ワードプレス側が操作できやすいようにデフォルトでもウィジェットがたくさん用意されております。

また、このウィジェットは自分で作成することもでき、カスタマイズは自由自在です。

この画面で、左にあるウィジェットを右のサイドバーへドラッグアンドドロップすれば、設定できるようになりますので一度、設定してみてください。

ここでは、試しに「最近の投稿」と「カテゴリー」と「アーカイブ」を設定してみましょう。

設定したら、一度どんな表示になっているのか確認してみましょう。

こんな感じになっていたら成功です。

今、左に寄ってしまっているのは、メインの記事が表示される個所を書いていないからなので安心してください。

しかし、これではすこし簡素なので、サイドバーのcssは書いてみましょう。

今回ですと私は以下のように書きました。もちろんご自身で書いていただいても大丈夫です。

今回、シンプルがモットーなのでかなりシンプルに仕上がっております。

こちらで確認してみましょう。

こうですね。きちんと反映されていました。

こちらでサイドバーは完成です。次回ではいよいよトップページのメイン部分を作りこんでいくのですが、その前にサンプルの記事をいくつか用意しておきましょう。

サンプル記事を作ろう

次回に、トップページのメイン部分である記事のループを作りこんでいきますがその際に表示させる記事がないといけませんよね。

プラグインを使用して、サンプル記事を追加する方法があるのですが今回は10記事ほど用意するだけなので、自分で作っていきましょう。

まずは、10記事分のアイキャッチ画像が必要になりますので素材集めから始めましょう。

私は、普段ブログを書く際に使用しているサイトをシェアします。

pixabay

こちらから、あなた好みの画像を10個ダウンロードしてください。

用意できたら、これをワードプレスのメディアにアップロードしていきましょう。

やり方はとても簡単です。

これでOKです。

では、記事の作成を行っていきましょう。

こんな感じで、タイトルと記事の内容は任意で好きなものを書きましょう。

そして、カテゴリもあと3つくらい増やしましょう。

そして、最後にアイキャッチ画像を先ほどメディアに追加したもののどれか一つを設定しましょう。

これで、「公開する」をクリックして完了です。

この同じ作業をあと、9回繰り返しましょう。

その都度、アイキャッチ画像は違うものに変えてください。また、カテゴリも適当に変えてみましょう。

記事の作成が10記事完了したら、今回は終了です。

お疲れさまでした。