arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

BootstrapでWordPressテーマを作ろう!vol.3

前回はindex.phpのカスタマイズまで行いました。今回は投稿ページ、固定ページ、サイドバーの作成について説明します。ここまでで大体のWordpressの機能が揃います。投稿ページと固定ページはindex.phpから作成するので、意外とあっという間です。早く仕上げて細かなレイアウトに取り掛かりたいところです。

1.サイドバーの作成と呼び出し – sidebar.php

前回で出来上がった画面はこちらでしたね。localhost/my_site/で表示される画面です。
loop-test2カラムの左側、index.phpのカスタマイズでした。右側のカラムをブログでよく見かけるサイドバーにします。

31行目から33行目が右カラムです。元々入っていた文章を削除してサイドバーを呼び出すget_sidebar()関数を挿入します。
ついでに前後の記事へのリンクとコメント欄を呼ぶcomments_template()関数も<?php endwhile; ?>と<?php else; ?>の間に入れておきましょう。
次に、自作テーマのフォルダmy_themeに新しくphpファイルを作成します。
Wordpressに用意されているウィジェット(小さな部品という意味)をサイドバーに組み込むためにこのようなコードを書きます。

サイドバーに設置するウィジェットを呼び出すためにdynamic_sidebar()関数を入れます。( ‘サイドバー’ )の’ ‘の中身はアルファベット表記でなくてもいいようです。
まだこの時点では右カラムにサイドバーは表示されません。次へ行きましょう。

2.投稿ページの作成 – single.php

各記事の単体ページを作成しましょう。index.phpを開いておき、少し変更を加えます。

index.phpと比較すると8行目のthe_permalink()が削除、10行目がthe_excerpt()関数からthe_content()関数へ変わっているのがわかります。
とてもよく似ていますね。これをsingle.phpとして保存します。

3.固定ページの作成 – page.php

single.phpを開いたまま、前後の記事へのリンクとコメント欄を削除します。

これを固定ページ用のテンプレート、page.phpとして保存します。

4.サムネイル・サイドバーの表示 – functions.php

あともう一息です。サムネイル(アイキャッチ画像)を表示させたり、サイドバーのウィジェットを呼び出すには新しくphpファイルを作りfunctions.phpの名前で保存します。

Wordpress管理画面のメニュー(黒い部分)にある外観にカーソルを合わせるとウィジェットが出てきました。クリックすると、サイドバーの欄が確認できます。
widgetこれは説明にもあるように、左側にある表示させたいブロックをサイドバー欄にドラッグ&ドロップするとサイトに反映されます。
sidebar1
ブログ然としてきましたね。お疲れ様でした!


ひとまずBootstrapを使ったWordpressテーマ開発に関しての初歩的な知識の説明はおしまいです。ここからはローカルで作ったテーマをアップロードしたり、Wordpressの機能を追加したりCSSやBootstrapでレイアウトを変えていくというサイト開発の醍醐味が待っています。
「コメント欄はどうしよう?」「ナビゲーションはどう作る?」「ブログでよく見かけるあの機能は?」など細かな機能は己の勉強も兼ねてこれから定期的に発信していきます。ねこま(@necomacustom)でした。

Share

Leave a comment

PAGE TOP