ステップアップ!WordPress中級

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

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

ぜひご覧ください。

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

字幕

それではここに 日付と カテゴリーを表示するように 書いていきたいと思います 日付とタイトルを 横並びにしたいので 横並びの解除をするための wrapper クラスを付けておきます この wrapper というクラスは 親テーマである TwentyTwelve で作成されている 回り込み解除用のクラスです 左寄せにする left クラスを作成して 日付を表示する― date の div を作ります 日付は the_time で表示します 日付と日時まで表示するようにします それから カテゴリーを表示します カテゴリーは the_category で表示します 書けたら保存をして アップロードします それでは この部分に適用したいので style.css を開いて 編集していきます 一番下に スタイルを追記していきます もう一度 HTML でどこにスタイルを 書いていくかを確認しておきましょう article という部分に 入っています そして article の部分ですが site-content article となって boader ですとか margin ですとか 色んなものが書いてありますので ここを上書きしていきたいと思います border を変更します 上書きする場合には !important を付けておくことをお勧めします !important を付けなくても 上書きできる場合もありますが 上手くいかないなという時には !important を付けてみてください そして header に スタイルを付けていきます header に margin が付けてあるのですが これは要らないので取っておきます そして左寄せの部分を float-left として 幅も指定します float を使う場合には できるだけ幅を入れた方が 確実だと思います そしてタイトル部分は 右寄せで float します それからですね TwentyTwelve の方のスタイルに h1 に clear が 付けられているのですが この clear は 横並びにする上で不要ですので 消しておきます 今 こう あらかじめ知っているように書いていますが 実際には CSS を書きながら 何か邪魔するようなものがあれば インスペクターで調べて その様子を逆に打ち消していくと clear が付いている場合に clear を打ち消していくとようなクラスを CSS の後から 作りながらどんどん足していく というな感じで作っていくことになります それでは書けましたので サイトで画面を表示してみます リロードします 画面が出ました 日付 日時と カテゴリーを 左寄せで表示して 右側にはタイトルが出ています すごくシンプルなリストが作れました この内容自体は 新しく子テーマの中に作った― content-list.php で表示しています ですので single.php の 投稿ページの方にいけば ちゃんと 通常の全部本文の出る テンプレートを使って そのまま 表示されるというふうになっています このようにしないと投稿のページも 同じようにタイトルしか出なくなりますので 別のテンプレートを用意する ということになります このレッスンでは 子テーマを使った 投稿の一覧ページの カスタマイズ方法について学習しました

ステップアップ!WordPress中級

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

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

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

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

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