2017/04/23SHAREツイートシェアはてブGoogle+PocketLINEこんにちは!takafumiです。『5日で学ぶWordPressテーマ作成』の5日目になりました!いよいよ、最終日です。記事を書いておきながらも、あっというまの5日間で信じられません(笑)4日目の『WordPressの記事一覧を表示するテーマを作成しよう』では「WordPressループ」について学び、記事のタイトルやアイキャッチ画像などが表示できるようになりましたね!最終日となる今日はサイドバーに配置された、カテゴリーやアーカイブの各ウィジェットのテンプレートを作成します。個別の記事を表示するページのテンプレートも実際に作っていきましょう!今回は『5日で学ぶWordPressテーマ作成』の集大成となる日です。自分を褒めましょう!サイドバーを作成してみようヘッダーとフッターを作成した時に、すでにサイドバー部分のテンプレートも分割しましたね。あとは、WordPressに登録されているカテゴリーやアーカイブなどの情報を取得して表示してみましょう!カテゴリー用のウィジェットを作ろうカテゴリーを取得するwp_list_categoriesという便利な関数をつかいます。開いて<ul>タグの中にもともと入っている<li>タグを削除して、次のようにコードを編集してください。wp_list_categories関数に配列形式の引数を渡しています。投稿数が表示されます);wp_list_categories($params);?></ul></div>ファイルを保存してページをリロードしてみましょう!あれ。なんか、ちょっと違いますよね。私がイメージしていたのは、これです。この原因はwp_list_categories関数が生成するHTMLコードによるものです。下のコードが今回自動的に生成されたHTMLコードです。(1)</li></ul>このテンプレートのスタイルに合わせて、<a>タグの中に記事数を表す数字を入れて、さらにそれを<span>タグで囲むようにコードを修正してみましょう。開いて、次のコードを追加してみましょう。classというもの拡張することで、カテゴリーを生成するHTMLタグを変えることできます。いう配列に、それぞれのカテゴリー名を表示するためのHTMLタグが格納されます。get_term_link関数の引数に各カテゴリーのアイテムを渡すことで、そのカテゴリーに該当する記事一覧ページへのURLを取得することができます。category_title_list,);wp_list_categories($params);?></ul></div>(省略)ファイルを保存して、ページをリロードしてみましょう。イメージ通りのカテゴリー表記になりましたね!アーカイブ用のウィジェットを作ろうつぎに、アーカイブ一覧を表示するウィジェットを作ってみましょう。アーカイブとは月別に記事を表示するための機能です。アーカイブを使うことで、2017年の3月に投稿された記事を一覧表示することができます。アーカイブを取得するには、wp_get_archivesという関数を使うのが便利です。指定することで、月別に記事をまとめることができます。trueにすることで、ある一定の期間に該当する記事の件数を表示してくれます。コードを次のように修正してみましょう。投稿数を表示);wp_get_archives($params);?></ul></div>(省略)ファイルを保存して、リロードをしてみましょう。月別にアーカイブが表示されました!バナーのリンクを直す実はサイドバーを見てみると、「メールマガジン登録してね!」的なバナーのリンクが切れてしまっています。これは、画像ファイルまでのパスがちゃんと取得できていないためです。部分を次のように修正します。?>/images/news-letter.png"></div>ファイルを保存して、リロードします。バナーのリンクが繋がって、画像が表示できたと思います。個別記事内の共通テンプレートを読み込もうカテゴリーとアーカイブを表示するウィジェットを作成して、サイドバーの部分が完成しました!次は個別記事のテンプレートを作り込んでいきましょう。トップページからどの記事でもいいので、「続きを見る」をクリックしてみましょう。すると、どうでしょう。文字だけのレイアウトもへったくれもないページが表示されたと思います。いうテンプレートファイルに自動的に変更されたからです。読み込むための準備がされていないので、このような残念な感じになってしまっています。ヘッダー部分それでは、共通のヘッダー部分を読み込んでみましょう。上のコードを全部削除します。get_header関数をそこに追加します。id="entry_article">(省略)ページを保存して、リロードしてみましょう。共通のヘッダーがちゃんと読み込まれたことで、スタイルが適用されるようになりましたね!フッター部分ヘッダーが無事に読み込まれたので、次はフッターです。id=”content”>の終わりタグの</div>よりしたを全部削除します。そこに、get_footer関数を追加してみましょう。?>ファイルを保存して、ページをリロードしてください。乗りに乗っているところで、ヘッダーやフッターと同じようにサイドバーも読み込んでみましょう。id=”content_sub”>タグの中のコードを全部削除します。そこに、get_sidebar関数を追加してみましょう。?></div>(省略)ファイルを保存して、ページをリロードしてください。見た目には、あまり変わっていないように見えますがちゃんとサイドバーの共通テンプレートが表示されています。記事の中身を作り込もうこれまでの作業で個別記事ページ内にあるヘッダーなどの共通部分を読み込めるようになりました!次はメインとなる記事の部分に取り掛かりましょう。今の状態だと、記事のタイトルやカテゴリーなどにはテキストがそのまま入ってしまっていますね。これでは、どの記事を見ても同じ情報になってしまいます。これから、この部分を修正していきましょう!WordPressループを作る記事を表示する際にもWordPressループを使います。<articel>タグを次のようにWordPressループで囲って下さい。(省略)</article><?phpendwhile;endif;?>(省略)タイトル、カテゴリー、投稿日時を表示しよう関数を使って、記事のタイトルやカテゴリーなどを表示してみます。?></time></div>(省略)ファイルを保存して、ページをリロードします。これで、ちゃんと記事のタイトルやカテゴリーなどが表示されました。アイキャッチ画像を表示するよーーく、個別記事のトップ部分をみてください。登録したアイキャッチ画像が表示されていませんよね。渡すことで、メディア設定のサイズ大の画像を取得できます。部分を次のように編集してみましょう。?></figure>(省略)ファイルを保存して、リロードしてみましょう。アイキャッチがタイトルの下に表示されましたね。the_content関数で本文を表示する記事の本文を表示してみましょう。WordPressループ内でthe_content関数を使うことで、記事の本文を簡単に取得できます。<section>タグの中のコードを全部消して、そこにthe_content関数を追加してみてください。?></section>(省略)ファイルを保存して、ページをリロードします。記事の本文が表示されましたね!今日のレッスンはここまでお疲れ様でした!5日目のレッスンはここでおわりです。今日はサイドバーにあるカテゴリーなどのウィジェットを作成しました。WordPressループを使って個別記事を表示して、タイトルやアイキャッチ画像、本文を表示できるようになりましたね。「やったー!完成だー!」と言いたいところですが、もう少し手を加えたいところもあります。それらについては、番外編で一緒に作っていきましょう!まずは自分を褒めましょう!あなたと一緒にやってきた『5日で学ぶWordPressテーマ作成』は今日で終了です。実際にやってみてどうだったでしょうか?今この文章を読んでいるということは、WordPressのテーマを自分の手で作ることができたという何よりもの証です。挫けずにここまでやってこれた自分を褒めてあげましょう。5日前までは出来なかったことが、勉強してきたことで出来るようになるということは本当に凄いことなんです。本当に!私もあなたと一緒にWordPressのテーマ作成について勉強できて、楽しかったです。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。Website前の記事こんなビジネスアイデアあり!?思わず驚いた目から鱗のアイデア次の記事cssの基本的な書き方を学ぼうデザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。