ステップアップ!WordPress中級

投稿一覧のカスタマイズ1

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
親テーマから投稿一覧の表示を変更する方法を解説します。
講師:
10:29

字幕

このレッスンでは 子テーマを使った 投稿一覧のカスタマイズについて学習します 今 TwentyTwelve を 親テーマに持つ 子テーマを作って サイトを表示しています この投稿の一覧部分の カスタマイズを行ってみたいと思います まず この投稿の一覧部分が テンプレートの中で どのように表示されているのかを 確認してみたいと思います エディターに移動します 親のテーマである TwentyTwelve― のテーマフォルダーを開いて index.php を開きます 投稿の一覧は メッセージループで表示しますので メッセージループの部分を探します この Start the Loop というところに if have_posts から始まる メッセージループがありました メッセージループは ここで終わっています TwentyTwelve では この if というところから メッセージループが始まって else というところ以下は 記事が一件もない時の― ための表示が書かれています ですので 今 記事のリストの部分を 変更したいので ここから下は見る必要がありません メッセージループの中で どういった処理が行われているかというと get_template_part という テンプレートタグを使って パーツを読み込んでいます パラメータの部分ですが content という名前と そして二つ目のスラッグの部分に get_post_format― というテンプレートタグが使われています get_post_format というのは 投稿フォーマットの id を取得するための テンプレートタグです つまりこのテーマでは content という ファイル名から始まって ハイフンの先に 投稿フォーマットごとに 別々のテンプレートファイルが 用意されていることが分かります 実際のファイルを確認してみると ここに content.php があって content-status とか quote とか page とか 投稿フォーマットごとに異なる 記事の詳細を表示する テンプレートファイルが 用意されていることが分かります 何も投稿フォーマットが 設定されていない時には content.php が 読み込まれるようになっています そして content.php 部分には the_title ですとか the_content というのが見えますので この部分に 実際に記事のタイトルや 本文を 表示するテンプレートタグが 書かれているのが分かります このように分割して 書いてあるということですね それではこの index.php を 子テーマにも作成して トップページの投稿一覧で表示される 一覧の内容を 変更していきたいと思います 子テーマの中に index.php を作成します 作成ができたら 親テーマの index.php の内容を一度 コピーして子テーマの index.php にペーストします トップページでは この get_template_part を使って 読み込む新しいテンプレートファイルを 指定したいと思います content list という― テンプレートファイルを 読み込んでみます 保存をして ファイルを閉じます 今 トップページから 読み込むようにした― content-list.php を 新しく用意します ファイルを作成して編集します こちらもすでにある content.php の中身を 一度コピーして 使いたいと思います 今回は一覧では タイトルと日付 それからカテゴリーだけを表示するような シンプルな一覧にしてみたいと思います 不要な記述を消していきます タイトルを表示しているのは ここですね なので header というタグ― この部分で表示しているので header を閉じた後の部分 この部分はまるまる消してしまいます それからポストサムネイルを表示するように しているので これも消してしまいます 次に is_single となっていて 投稿ページの時の表示― が書いてありますが 今回トップページのみ使用しますので この if から if の終わりまで消します else が入っていますので この else も消してしまいます そしてこの部分ですね if の終わりの endif is_single というふうにコメントがついていて これがさきほどの is_single を判定している― if の終わりの部分であることが 分かりますので ここも消します それからコメントへのリンクが 表示されるようになっていますので ここも消してしまいます この if から endif まで 必ず― if 文のような複数行に渡るような php の記述の場合には if を消したら endif まで消すようにしてください これを間違えると 画面にエラーが出てしまいます 試しにこのように endif を残して ページを保存してしまうと トップページをリロードします このようにですね endif にエラーがありますというような メッセージが出てしまいますので 必ず― if 文の始まりからお終いまで きちんと消してあげるのが大切になります かなりシンプルな ソースコードになりました article タグから終了の article タグまで― 入っています それでは一度 これで画面を見てみたいと思います はい 一覧のページが表示されました タイトルだけが今 表示されています よく見るといくつかのタイトルが ところどころ違う― デザインになっているのがわかります この部分を インスペクターを使って確認してみます ここですね background-color などが 指定されていて この部分で デザインが変わっていることが分かります このスタイルのクラスを見ると article に format-link― と出て header というふうに出ています この format-link という― クラスに対して 他とは違うデザインが 適用されていることが分かります この format-link というのは 何かというと article タグの中に クラス名で 入っています ここですね format-link というのが入っています もう一度 エディターから ソースを見てみます article タグには id として the_ID を使って その記事の id を 出すようになっています それから post_class という テンプレートタグを使って その記事ごとに最適なクラス名を 表示するようになっています さきほどのフォーマットリンクというのは 投稿フォーマットの リンクの指定をした投稿フォーマットに 付けられる CSS クラスです 今回は投稿フォーマットに関係なく すべて同じデザインにしたいので この post_class というところを まるまる消してしまいます はい これでもう一度 リロードしてみましょう 投稿フォーマットに関係なく すべて同じデザインになりました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

3時間24分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年02月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。