テンプレート駆動ページ

WordPressページアーキテクチャのコア構造に入る前に、WordPressが最終的なページの「外観」とコンテンツを生成するためにテンプレートファイルを使用していることを理解する必要があります。たとえば、WordPressサイトのフロントページを表示しているとき、実際にはいくつかのテンプレートファイルを表示しています：

  • index.php
  • header.php
  • sidebar.php
  • footer.php

単一の投稿ページを表示しているとき、次のテンプレートファイルを表示している可能性があります：

  • single.php
  • header.php
  • sidebar.php
  • footer.php
  • comments.php

カテゴリ、アーカイブ、検索などの複数投稿ページでは、次のテンプレートファイルの任意の組み合わせを表示している可能性があります：

  • index.php
  • category.php
  • 404.php
  • search.php
  • header.php
  • sidebar.php
  • footer.php

以下のアーキテクチャ仕様では、どのCSSセレクタがどのテンプレートファイルに属するかをできるだけ明確に指定しています。

コア構造

WordPressサイトのコア構造は、ページのコンテンツを保持する主要なコンテナを表します。WordPressサイトのコア構造は、最低限次の要素を特徴としています：

  • ヘッダー
  • サイドバー/メニュー
  • コンテンツ
  • フッター

これらは、ページの最も重要な部分が「含まれている」主要なコンテナです。コア構造は、各ユニットが他のユニットに依存する一連のブロックのようなものです。一つを変更すると、他のものも変更する必要があります。

クラシックテーマ 

  1. <body>
  2.   <div id="rap">
  3.    <h1 id="header"></h1>
  4.    <div id="content"></div>
  5.    <div id="menu"></div>
  6.    <p class="credit"></p>
  7.   </div>
  8. </body>

デフォルトテーマ 

  1. <body>
  2.   <div id="page">
  3.    <div id="header"></div>
  4.    <div id="content" class="narrowcolumn"></div>
  5.    <div id="sidebar"></div>
  6.    <div id="footer"></div>
  7.   </div><!-- end page -->
  8. </body>

両方のテーマがサイドバーを使用していることに注意してください。最初のテーマはそれをメニューと呼び、もう一方のテーマはサイドバーと呼びます。

これら二つのテーマのコア構造の主な違いは、ヘッダーとフッターの使用です。クラシックテーマでは、ヘッダーはh1タグにあり、フッターは段落タグで囲まれています。一方、デフォルトテーマでは、ヘッダーはheaderというdivに配置され、フッターはfooter divに配置されています。

両方のテーマには、ページ全体を「包み込む」コンテナがあります。このコンテナ（通常はbody HTMLタグと組み合わせて使用される）は、全体の構造をより明確に制御することを可能にします。使用されているWordPressテーマによって、このコンテナは次のようにも呼ばれます：

  • page
  • wrap
  • rap

一部のテーマは、二つ目、三つ目、または四つ目のサイドバーを追加し、カラム効果を生み出すことがあります。また、ページ全体や特定のコンテナの周りに追加のラッパーを含めることもあります。しかし、すべての場合において、基本的なコア構造は本質的に同じままです。

モジュラーテンプレートファイル

ブロックの構成を前提に、WordPressテーマはコア構造をテンプレートファイルと呼ばれる個々のブロックに分割します。これらがテンプレートファイルです：

  • ヘッダー – header.php
  • サイドバー/メニュー – sidebar.php
  • コンテンツ – index.php、single.php、page.php、category.php、author.php、search.phpなど
  • フッター – footer.php

これらの各テンプレートファイルでは、コンテンツのための包括的なコンテナとしてbody divを使用することが可能です。

特定のWordPressテーマを使用しているウェブページを表示しているとき、生成される特定のテンプレートファイルはユーザーのリクエストに依存します。ユーザーがカテゴリタグをクリックすると、カテゴリテンプレートが使用されます。ユーザーがページを表示すると、ページテンプレートが使用されます。

これらのコアテンプレートファイルがWordPressループとクエリと組み合わせて読み込まれると、さまざまなテンプレートが生成されます。これにより、ウェブページ開発者は各特定のテンプレートに対して個別でユニークなスタイルを作成することができます。

内部構造

これらのコア構造コンテナ内には、親コンテナ内の特定のコンテンツを保持する小さなブロックがあります。WordPressテーマはこれらのさまざまなブロックを特徴とすることができますが、WordPressに付属する二つのテーマに集中します。（ほとんどのWordPressテーマテンプレートはこれらの二つのテーマに基づいています。）

ヘッダー

ヘッダーは、伝統的にウェブページの上部に位置する構造です。ウェブサイトのタイトルが含まれています。マストヘッド、ヘッド、タイトル、またはバナーとも呼ばれることがあります。すべてのWordPressテーマでは、ヘッダーはheader.phpテンプレートファイル内にあります。

クラシックテーマは最もシンプルなヘッダーコードを特徴としています： 

  1. <h1 id="header"></h1>

デフォルトテーマはより複雑なヘッダーコードを持っています： 

  1. <div id="header">
  2.   <div id="headerimg">
  3.    <h1></h1>
  4.    <div class="description"></div>
  5.   </div>
  6. </div>

クラシックテーマのスタイルはテーマのstyle.cssファイル内に見つかりますが、デフォルトテーマのスタイルはstyle.cssファイルとheader.phpのテンプレートファイルの両方に見つかります。これらのスタイルの扱いについては、ヘッダーのデザインの記事で詳しく説明されています。

コンテンツ

WordPressのコンテンツコンテナは重要な役割を果たします。なぜなら、WordPressループを保持しているからです。WordPressループは、現在のページに表示される各投稿を処理します。これらの投稿は、ループタグ内の特定の基準にどのように一致するかに応じてフォーマットされます。

クラシックテーマは最もシンプルなコンテンツ構造を持っています： 

  1. <div id="content">
  2.   <h2>Date</h2>
  3.   <div class="post" id="post-1">
  4.    <h3 class="storytitle">Post Title</h3>
  5.    <div class="meta">Post Meta Data</div>
  6.    <div class="storycontent">
  7.    <p>Welcome to WordPress.</p>
  8.    </div>
  9.    <div class="feedback">Comments (2)</div>
  10.   </div>
  11. </div>

クラシックテーマは、日付、タイトル、投稿メタデータ、投稿コンテンツ、フィードバック（コメント数）のためのコンテナをホストしています。また、単一の投稿の外観を個別にスタイル設定する強力な機能を示しています。 

  1. <div class="post" id="post-1">

投稿CSSクラスセレクタは、このコンテナに投稿スタイルを適用します。投稿クラスセレクタには、WordPressによって自動的に生成されるIDもあることに注意することが重要です。クラスセレクタのIDを表示するために使用できるコードの例は次のとおりです： 

  1. <div class="post" id="post-<?php the_ID(); ?>">

テンプレートタグthe_ID()を使用すると、投稿のID番号が表示されます。このユニークな識別子は、内部ページリンクやスタイルに使用できます。たとえば、個別の投稿にはpost-1のスタイルがあり、post-2のスタイルもあるかもしれません。すべての投稿にスタイルを持たせるのは少し過剰ですが、見た目を少し変えたい投稿が一つか二つあるかもしれません。一部のプラグインは、この識別子を使用して異なる投稿の外観を自動的に変更することもあります。

デフォルトテーマのコンテンツコンテナは、複数投稿ビュー（例：フロントページ、カテゴリ、アーカイブ、検索）と、単一投稿のための単一投稿ビューを特徴としています。複数投稿ビューは次のようになります： 

  1. <div id="content" class="narrowcolumn">
  2.   <div class="post" id="post-1">
  3.    <h2>Post Title</h2>
  4.    <small>Date</small>
  5.    <div class="entry">
  6.    <p>Post Content.</p>
  7.    </div>
  8.    <p class="postmetadata">Post Meta Data Section</p>
  9.   </div>
  10.   <div class="navigation">
  11.    <div class="alignleft">Previous Post</div>
  12.    <div class="alignright">Next Post</div>
  13.   </div>
  14. </div>

ここでは多くのことが行われています。分解してみましょう。

コンテンツ例の分解

  1. <div id="content" class="narrowcolumn">

複数投稿ビューは、narrowcolumnというクラスを持つコンテンツコンテナを特徴とし、単一投稿ビューはwidecolumnというクラスを持っています。単一投稿ビューのサイドバーはそのページで生成されず、投稿はコンテンツエリア全体の幅で表示されます。 

  1. <div class="post" id="post-1">

クラシックテーマのように、この分割は投稿のスタイルとpost-Xの識別子を設定します。ここでXは投稿のユニークID番号を表します。これにより、ユーザーは特定の投稿の外観をカスタマイズできます。 

  1. <h2>Post Title</h2>

これは、<h2>タグによってスタイル設定された投稿のタイトルコードを含みます。 

  1. <small>Date</small>

日付コードはsmallタグで囲まれ、スタイル設定されています。 

  1. <div class="entry">

投稿コンテンツは、entry CSSセレクタ内のスタイルと段落タグの組み合わせでスタイル設定されています。 

  1. <p class="postmetadata">Post Meta Data Section</p>

投稿メタデータセクションには、投稿の日付、時間、投稿が属するカテゴリなどのデータ詳細が含まれています。 

  1. <div class="navigation">

次と前のリンクは、ナビゲーションdiv内でスタイル設定されています。また、前の投稿用のalignleftクラスと、次の投稿用のalignrightクラスが含まれています。

これらの要素は、単一投稿ビューのコンテンツ構造で移動します： 

  1. <div id="content" class="widecolumn">
  2.   <div class="navigation">
  3.    <div class="alignleft"></div>
  4.    <div class="alignright"></div>
  5.   </div>
  6.   <div class="post" id="post-1">
  7.    <h2>Post Title</h2>
  8.    <div class="entrytext">
  9.    <p>Post content.</p>
  10.    <p class="postmetadata alt">
  11.    <small>Post Meta Data</small>
  12.    </p>
  13.    </div>
  14.   </div>
  15. </div>

サイドバーがないため、widecolumnクラスはコンテンツをページ全体に広げるようにフォーマットされています。ナビゲーションdivは上部に移動され、投稿メタデータはentrytext親コンテナに組み込まれ、異なるスタイルが適用され、altクラスセレクタが追加されました。

デフォルトテーマのこれら二つの例は、WordPressサイトがカスタマイズできる無数の方法を垣間見せてくれます。

コメント

コメントは、単一投稿ビュー（comments.phpテンプレートファイルを使用）またはポップアップウィンドウ（comments-popup.phpテンプレートファイルを使用）で表示されることがあります。これら二つのタイプのコメントの全体的なスタイルは基本的に同じです。

クラシックテーマのコメント
  1. <h2 id="comments">1 Comment
  2.   <a href="#postcomment" title="Leave a comment">»</a></h2>
  3.   <ol id="commentlist">
  4.    <li id="comment-1">
  5.    <p>Hi, this is a comment.</p>
  6.    <p><cite>Comment by Person</cite> </p>
  7.    </li>
  8.   </ol>
  9.   <p>
  10.    <a href='https://example.com/archives/name-of-post/feed/'><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a>
  11.    <a href="https://example.com/name-of-post/trackback/" rel="trackback">TrackBack <abbr title="Uniform Resource Identifier">URI</abbr></a>
  12.   </p>
  13.   <h2 id="postcomment">Leave a comment</h2>
  14.   <form action="https://example.com/blog/wp-comments-post.php" method="post" id="commentform">
  15.    <p>
  16.    <input type="text" name="author" id="author" value="" size="22" tabindex="1">
  17.    <label for="author"><small>Name (required)</small></label>
  18.    </p>
  19.    <p>
  20.    <input type="text" name="email" id="email" value="" size="22" tabindex="2">
  21.    <label for="email"><small>Mail (will not be published) required)</small></label>
  22.    </p>
  23.    <p>
  24.    <input type="text" name="url" id="url" value="" size="22" tabindex="3">
  25.    <label for="url"><small>Website</small></label>
  26.    </p>
  27.    <p>
  28.    <small><strong>XHTML:</strong> List of Tags you can use in comments</small>
  29.    </p>
  30.    <p>
  31.    <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
  32.    </p>
  33.    <p>
  34.    <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment">
  35.    <input type="hidden" name="comment_post_ID" value="1">
  36.    </p>
  37.   </form>
  38. </div>

コメントの個々のセクションにはスタイリング参照がありますが、クラシックテーマには一般的なコメントの区分やグループスタイルの参照はありませんが、簡単に追加できます。

#comments h2

「コメント4件 コメントを残す」と書かれたコメントリストの上部のタイトルをスタイル設定します。文の後半は<h2 id="postcomment">Leave a comment</h2>にジャンプするリンクです。

#comment-n

コメントにはユニークなID番号が付与され、ここではnという文字で示されています。これにより、個別にスタイル設定できます。

#comments ol

これはコメントの順序付きリストを開始し、一からカウントダウンし、コメントリストの全体的なスタイルを設定します。

#comments li

リスト内の各コメントのスタイル参照です。

#comments p

この段落タグは、コメントリスト内の実際のコメントをスタイル設定します。

#comment cite

このciteの使用は、コメント者の名前の外観を制御します。通常、「名前が言う：」とコメントリストに表示されます。

#comments h2または#postcomment

h2見出しは、#comments h2または#postcommentの二つの方法でスタイル設定できます。後者は、コメントセクションの上部にある「コメントを残す」リンクでも使用されます。

#commentform

コメントを入力するための全体的な「フォーム」のスタイル参照です。各入力エリアには独自のIDがあります。

#author

コメント作者の入力エリアのID参照です。

#comments small 

  2. **#email**  
  4. コメント作者のメールのID参照です。  
  6. **#url**  
  8. コメント作者のURLのID参照です。  
  10. **#comment**  
  12. コメント入力テキストエリアのID参照です。最終的に生成されたコメントのスタイルを設定するのではなく、入力ボックスのスタイルを設定します。  
  14. **#comment #submit**  
  16. クラシックテーマには、検索とコメント送信のための二つの送信ボタンがあります。これはコメント送信ボタンです。
  18. ##### デフォルトテーマのコメント
  20. デフォルトテーマのコメントは、comments.phpおよびcomments-popup.php内でループクエリを特徴としており、コメントが開いているか、閉じているか、または存在するかに応じて情報が変わります。コメントが開いているか閉じていて、コメントがない場合、この情報は`````<h3 id="comments">`````タグ内に表示されます。  
  23. ``````bash
  24. <h3 id="comments">One Response to "Hello world!"</h3>
  25. <ol class="commentlist">
  26.   <li class="alt" id="comment-1">
  27.    <cite>
  28.    <a href="https://example.org/" rel="external nofollow">Mr WordPress</a>
  29.    </cite> Says:<br>
  30.    <small class="commentmetadata">
  31.    <a href="#comment-1" title="">Date and Time</a>
  32.    </small>
  33.    <p>Hi, this is a comment.</p>
  34.   </li>
  35. </ol>
  36. <h3 id="respond">Leave a Reply</h3>
  37. <form action="https://example.com/blog/wp-comments-post.php" method="post" id="commentform">
  38.   <p>
  39.    <input name="author" id="author" value="" size="22" tabindex="1" type="text">
  40.    <label for="author">
  41.    <small>Name (required)</small>
  42.    </label>
  43.   </p>
  44.   <p>
  45.    <input name="email" id="email" value="" size="22" tabindex="2" type="text">
  46.    <label for="email">
  47.    <small>Mail (will not be published) required)</small>
  48.    </label>
  49.   </p>
  50.   <p>
  51.    <input name="url" id="url" value="" size="22" tabindex="3" type="text">
  52.    <label for="url">
  53.    <small>Website</small>
  54.    </label>
  55.   </p>
  56.   <p>
  57.    <small><strong>XHTML:</strong> You can use these tags:....</small>
  58.   </p>
  59.   <p>
  60.    <textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
  61.    </textarea>
  62.   </p>
  63.   <p>
  64.    <input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
  65.    <input name="comment_post_ID" value="1" type="hidden">
  66.   </p>
  67. </form>
  68. </div>
  69. `

コメントの個々のセクションにはスタイリング参照がありますが、デフォルトテーマには一般的なコメントの区分やグループスタイルの参照はありませんが、簡単に追加できます。

h3 #comments

「投稿への応答の数」の見出しのための<h3>タグをスタイル設定します。

#commentlist ol

コメントリストの「順序付きリスト」をスタイル設定します。

.alt liおよび#comment-n

コメントリストアイテムには二つのスタイル参照があります。最初のものはクラスaltで、二つ目はここでnという文字で示されるコメントID番号です。これにより、個別にスタイル設定できます。

cite

citeタグは「名前が言う：」とコメント作者のURLへのリンクをフレームします。

.commentmetadata small 

  2. **ol #commentlist p**  
  4. コメントの順序付きリスト内の段落をスタイル設定します。  
  6. **#respond h3**  
  8. 「返信を残す」の見出しをスタイル設定します。  
  10. **#commentform**  
  12. コメントを入力するための全体的な「フォーム」のスタイル参照です。各入力エリアには独自のIDがあります。  
  14. **#author**  
  16. コメント作者の入力エリアのID参照です。  
  18. **#comments small**  
  20. `````<small>`````タグは、クラシックテーマのいくつかの場所で使用されています。この使用は、**コメント送信フォーム**内のテキストと、コメントで使用できる**タグのリスト**のテキストを囲みます。  
  22. **#email**  
  24. コメント作者のメールのID参照です。  
  26. **#url**  
  28. コメント作者のURLのID参照です。  
  30. **#comment**  
  32. コメント入力テキストエリアのID参照です。最終的に生成されたコメントのスタイルを設定するのではなく、入力ボックスのスタイルを設定します。  
  34. **#comment #submit**  
  36. クラシックテーマには、検索とコメント送信のための二つの送信ボタンがあります。これはコメント送信ボタンです。
  38. ##### ポップアップコメント
  40. クラシックテーマとデフォルトテーマの`````comments-popup.php`````テンプレートファイルは本質的に同じです。彼らは[クラシックテーマのコメント構造](#Default_Theme_Comments)のレイアウトを使用しています。クラシックテーマは`````<h2>`````見出しを使用し、デフォルトテーマは`````<h3>`````見出しをコメントのタイトル見出しに使用していますが、comments-popup.phpテンプレートファイルでは、両方とも`````<h2>`````見出しタグを使用しています。  
  43. ``````bash
  44. <body id="commentspopup">
  45.   <h1 id="header"></h1>
  46.   <h2 id="comments">Comments</h2>
  47.   ....Classic Theme commment section.....
  48.   ...Classic Theme footer....
  49. `

bodyタグは#commentspopupで全体のページのスタイルを設定します。<h2>見出しはコメントセクションを開始します。

テーマ全体のヘッダーとフッター内のタグの構造を変更する場合は、特にテーマを公開する予定がある場合、その構造の変更がコメントポップアップテンプレートに適用されることを確認してください。

サイドバー

デフォルトテーマで見たように、サイドバーは使用されているテンプレートファイルに応じて表示されることもあれば、表示されないこともあります。一般的に、サイドバーはシンプルまたは複雑である可能性があります。WordPressテーマは、サイドバー内にネストされたリストの情報を特徴とすることがよくあります。サイドバーに関するステップバイステップガイドはサイドバーのカスタマイズにあり、CSSでのリストのスタイリングに関する詳細情報もあります。

一般的に、WordPressのサイドバーは、リスト内のさまざまなセクションのタイトルを特徴とし、タイトルの下にネストされたリスト内のセクションアイテムがあります。

クラシックテーマのサイドバーは次のようになります。リンクは簡略化のために削除されています： 

  1. <div id="menu">
  2.   <ul>
  3.    <li class="pagenav">Pages
  4.    <ul>
  5.    <li class="page_item">Contact</li>
  6.    <li class="page_item">About</li>
  7.    </ul>
  8.    </li>
  9.    <li id="linkcat-1"><h2>Blogroll</h2>
  10.    <ul>
  11.    <li>Blogroll Link 1</li>
  12.    <li>Blogroll Link 1</li>
  13.    <li>Blogroll Link 1</li>
  14.    </ul>
  15.    </li>
  16.    <li id="categories">Categories:
  17.    <ul>
  18.    <li>Category Link 1</li>
  19.    <li>Category Link 2</li>
  20.    </ul>
  21.    </li>
  22.    <li id="search">
  23.    <label for="s">Search:</label>
  24.    <form id="searchform" method="get" action="/index.php">
  25.    <div>
  26.    <input type="text" name="s" id="s" size="15"><br>
  27.    <input type="submit" id="searchsubmit" value="Search">
  28.    </div>
  29.    </form>
  30.    </li>
  31.    <li id="archives">Archives:
  32.    <ul>
  33.    <li>Archives Month Link 1</li>
  34.    <li>Archives Month Link 2</li>
  35.    </ul>
  36.    </li>
  37.    <li id="meta">Meta:
  38.    <ul>
  39.    <li>RSS Feed Link</li>
  40.    <li>RSS Comments Feed Link</li>
  41.    <li>XHTML Validator</li>
  42.    <li>XFN Link</li>
  43.    <li>WordPress Link</li>
  44.    </ul>
  45.    </li>
  46.   </ul>
  47. </div>

これらのほとんどは自己説明的です。各リンクセットには独自のCSSセレクタがあります：ページ、カテゴリ、アーカイブ、検索、メタ。

ページとリンクカテゴリ

ページとリンクカテゴリは、「ブログロール」とラベル付けされ、およびテンプレートタグを使用して自動的に見出しを生成します。

リンクカテゴリの場合、そのリンクセットのためにh2見出しを生成します。これは、メニューのh2見出しを他の見出しとは異なる外観にスタイル設定することができることを意味します。または、すべての見出しが同じ外観になるように、メニューのh2スタイルが自動生成されない他のカテゴリスタイルと一致するようにすることができます。

ページテンプレートタグは、pagenavを見出しとして生成し、ページを新しい方法で識別します。複数投稿ビューと単一投稿ビューで表示される一般的なリストとして、ページリストアイテムにはclass=”page_item”があり、これによりそれらのリンクをスタイル設定できます。個別のページを表示しているとき、そのページのリンクはclass=”current_page_item”に変更され、他のページリンクとは異なる外観にスタイル設定できます。

カテゴリ、アーカイブ、メタ

他のサイドバーセクションのタイトル、カテゴリ、アーカイブ、メタなどは、自動的にタイトルを生成するテンプレートタグを使用していません。これらは、ページ上にテキストを「印刷」するPHPステートメント内に設定されています。これらは見出しタグ内に配置することもできますが、WordPressは_e()関数を使用してテキストタイトルを表示またはechoし、テキストを言語翻訳の可能なターゲットとしてマークします。テーマを開発する予定がある場合は、公開用に[https://codex.wordpress.org/Designing_Themes_for_Public_Release]、echo関数の使用が強く推奨されます。

これらを個別にスタイル設定することも、すべて同じにすることもできます。デフォルトテーマのように、すべてを<h2>見出しに配置するテーマもあり、リスト見出しがすべて同じ外観になります。したがって、各セクションのリンクの外観を変更するためにスタイル参照を使用するかどうかは、必要に応じて追加できます。

検索フォーム

検索フォームはsearchform.php内にあります。サイドバー内のさまざまな場所に見つかることがあります。全体の検索フォームをスタイル設定するには、検索IDを使用します。ここに、デフォルトでスタイル設定できる検索フォームの個々のエリアのリストがあります。スタイルクラスを追加して、検索フォームの外観をより制御することができます。 

  1. <li id="search">
  2.   <label for="s">Search:</label>
  3.   <form id="searchform" method="get" action="/index.php">
  4.    <div>
  5.    <input type="text" name="s" id="s" size="15"><br>
  6.    <input type="submit" id="searchsubmit" value="Search">
  7.    </div>
  8.   </form>
  9. </li>

#search

検索フォームの全体的なスタイル。

#search label

必要に応じてラベルタグをスタイル設定するために使用されます。

#searchform

フォーム自体をスタイル設定するために使用されます。

#search div

このラベルのないdivは、親コンテナsearchの子コンテナであり、そのセレクタ内からスタイル設定できます。

#searchform input

検索のための入力エリアをスタイル設定するために、このセレクタの組み合わせが機能します。

#searchsubmit

デフォルトテーマで使用されるこのセレクタは、検索または送信ボタンをスタイル設定するために使用される可能性があります。

検索フォームエリア、入力、およびボタンは、さまざまな方法でスタイル設定することができ、デフォルトの入力と「ボタン」の外観のままにすることもできます。

メタフィードリンク

メタリンクは、さまざまなリンクを表すテキストまたはアイコンとして表示されることがあります。XHTMLおよびCSS検証リンクはW3アイコンを使用することがあります。さまざまなフィードもアイコンとして表すことができます。またはテキストのままにすることもできます。あなた次第です。サイドバー内でのテキストまたはアイコンとしてのフィードの使用については、WordPressフィードの記事で説明されています。

フッター

フッターはfooter.phpテンプレートファイル内にあります。デフォルトテーマとクラシックテーマの両方で、フッターにはほとんど情報が含まれていません。

クラシックテーマ 

  1. <p class="credit">
  2.   <!--15 queries. 0.152 seconds. -->
  3.   <cite>Powered by <a href='https://wordpress.org' title='Powered by WordPress, state-of-the-art semantic personal publishing platform.'> <strong>WordPress</strong></a></cite>
  4. </p>
  5. </div>

フッターのコンテンツは、creditクラスと段落およびciteタグでスタイル設定されています。

このタグは、ページで使用されたmysqlクエリの数と、ページの読み込みにかかった時間をHTMLコメントコードで表示します。これは管理者の便宜と使用のためにあります。ページのソースコード内でのみ表示されます。これをページ上に表示したい場合は、コメントを削除してください。その外観は段落タグのcreditクラススタイルに影響されます。テンプレートファイルでは、次のように見えます： 

  1. <!--<?php echo $wpdb->num_queries; ?> queries.
  2. <?php timer_stop(1); ?> seconds. -->

デフォルトテーマ 

  1. <div id="footer">
  2.   <p>Blogging in the WordPress World is proudly powered by <a href="https://wordpress.org/">WordPress</a><br>
  3.    <a href="feed:http://example.com/feed/">Entries (RSS)</a> and <a href="feed:https://example.com/comments/feed/"> Comments (RSS)</a>.
  4.    <!-- 18 queries. 0.186 seconds. -->
  5.   </p>
  6. </div>

デフォルトテーマのフッターは、footer IDと段落タグでスタイル設定されています。フッターエリア自体はフッターによってスタイル設定されるかもしれませんが、段落タグはその中のテキストを制御します。フッター内の段落タグをページの他の部分とは異なるスタイル設定するには：

#footer p {styles}

リソース

変更履歴