はじめる!WordPress入門

コメントの表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
投稿ページにコメントを表示するためにコメントテンプレートを作成します。
講師:
07:56

字幕

このレッスンでは、 コメントの表示方法について学習します。 投稿の詳細ページで、本文の下に コメントのリストとコメントホームを 表示するようにしてみましょう。 エディタに移動します。 最初に、コメントを表示するテンプレート comments.ptp を作成します。 作成できたら、 ファイルを開いて編集していきます。 コメント欄にコメントとタイトルを 表示するようにします。 コメントリストは list タグを使って 表示されますので、 最初に ul タグを書いておきます。 if 文を使って、 コメントがあるかどうかを調べます。 コメントがあれば、 wp_list_comments を実行して コメントのリストを表示します。 コメントフォームは comment_form タグで 表示することができます。 comment_notes_after という パラメータを指定すれば コメントフォームの最後に表示される 使用できるタグのリスト部分を 編集することができます。 何も記述しなければ、何も表示されません。 書けたら保存をして、アップロードします。 次にコメント欄を表示するために、 single.php を編集します。 post テンプレートを読み込んだ後に、 コメントテンプレートを 読み込むようにします。 コメントテンプレート全体を、 comments という id でくくっておけば、 一覧ページから コメントをクリックしたときに、 自動的にアンカーでこの部分に移動します。 コメントテンプレートを読み込むには、 comments_template タグを使います。 記述ができたら 保存をしてアップロードします。 それではサイトで表示を確認してみましょう。 リロードします。 コメントのリストと コメントフォームが表示されました。 それではコメント部分にも CSS を指定して、 デザインを作成していきましょう。 style.css を開きます。 コメントのタイトル部分は、 左に寄せて表示します。 タイトルは薄いグレーで表示します。 タイトルの右に、コメントのリストや コメントフォームを表示していきましょう。 コメントのリストは、コメントリストという div タグにしましたので、 コメントリストを記述します。 コメントは一つ一つが list タグで表示されますので、 list タグに対して CSS を記述していきます。 comment-meta は コメントの投稿日時部分に 付けられているクラスです。 この部分はフォントサイズを少し小さくして、 文字の色を薄いグレーにしておきます。 reply は返信部分に付けられる CSS クラスです。 右寄せにして、同じくフォントサイズを 少し小さくしておきます。 コメントの中に付けられた返信は、 ul タグに children という クラス名が付いて リストで表示されます。 返信部分を インデントしておきましょう。 次にコメントの投稿フォーム部分を デザインしていきます。 コメントの投稿フォームには、 respond という id が振られます。 これを手掛かりに スタイルシートを記述していきます。 テキストエリアの幅を、 エリアの幅いっぱいにしておきます。 form-submit は投稿ボタンのエリアに 付けられる CSS クラスです。 ボタンを中央揃えにしておきます。 submitid はサブミットボタン本体に 付けられる id です。 ボタンのデザインを変更します。 書けたら保存をして、 サイトでの表示を確認してみましょう。 リロードします。 コメントのリスト、コメントの投稿フォームの デザインができました。 このレッスンでは、 コメントの表示方法について学習しました。

はじめる!WordPress入門

ブログ作成ツールやCMSとしてもっともポピュラーなWordPressを使えば、ブログだけでなく一般的なサイトでも簡単に無料で作ることができます。このコースでは初めての方を対象にWordPressをインストールから実際のサイト構築まで丁寧に解説していきます。

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

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

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

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