POCOの内部構造(CSS,PHP)が分かるエクセルシート
この記事は約 7 分で読めます
POCO は全ソースコードを無料公開しています。ご自由にダウンロードし、中身の解析や改造も自由にしていただけます。
しかしただソースコードを見ても学習は難しいのではないでしょうか。 POCO ではコメントに管理番号を割り振り、コード内のパーツを目次化して管理しています。そして各テーマファイルとパーツの関連性をエクセルシートで管理しています。
このページではこのエクセルシートに何が書かれているのか説明します。
POCO をダウンロードの際はこのエクセルシートも一緒にダウンロードしてください。そしてソースコードとこの表を比較することで、 POCO （ワードプレステーマ）の理解を深めることができます。
CSSをベースとしたサイト構造説明と目次
このエクセルファイル内には 3 シート + 旧定数設定シートがあります。その中で最も重要なのが「総目次」シートです。このシートには、 POCO のソースコードのどこに・何が実装されているかがすべて網羅されています。
上の図の例では「3.15 記事の公開日と更新日の生成パーツ」が functions.php, single.php に実装されていることを示しています。さらに style.css ではこのパーツの装飾コードもあります。
実際には●のあるファイルにコードが実装されているため、 page.php, index.php にも公開日と更新日の生成パーツは実装されています。
このように、 POCO には秘密の処理や実装は一切ありません。すべての部品をこの表で管理しているため、ソースコードのある部分を探すのに迷子になりにくいです。
style.css ファイルを実際に開くと、コードブロックごとにユニークな番号が割り振られています。この番号により全 5 パート（大項目）分の目次が構成されます。
各ソースコード (php) 内にも同じ番号がコメントで記載されています。 CSS, php の各ファイルが単独で存在しているわけではなく、 CSS を軸に互いに関連していることがおわかりいただけます。
CSS を軸とした構造管理が本来あるべき形かどうかはわかりません。しかし下記の理由で採用しました。
- 自分用の忘備録として、何を実装したが後で思い出せる
- POCO でワードプレスの中身を知りたい人へ、学習するための情報を提供できる
全 5 パートがどのように構成されているのでしょうか？もう少しだけ詳しく説明します。
1. 一般的な設定
第 1 パートは CSS の初期化、汎用タグの設定、カスタムフォントの設定、その他 CSS に直接関連しないワードプレス側の処理を記載しています。
CSS の初期化と汎用タグ (a, body) については、ご自身のサイトイメージに合わせて修正してください。一般的な CSS の解説サイトが参考になります。
その他、ワードプレス関連処理については以下の内容が style.css にコメントで記載されています。
- functions.php の中で、ワードプレスの設定等ブログの表示に直接関係ない関数や定数をリスト化
- functions.php 内にある、メタデータ（メタディスクリプション）を生成する関数の一覧と説明
どちらもコメントのみで、 CSSのコードはありません。
functions.php はブログに高度な表示を行うために機能（関数）を追加できる php ファイルです。実際には拡張だけでなく、ワードプレスの設定などの地味な処理もあります。
しかしこういうコードこそ、ワードプレステーマのカスタマイズにて見落とされやすい項目です。
こういった見落とされやすい項目もあえて CSS ファイルにも書いておくことで、 どういうカスタマイズがされているのかを忘れないようにしています。そしてエクセルシートで他の PHP ファイルとの関連性を明記しています。
メタデータの詳細についてはこのページの後半「メタディスクリプションの実装ページタイプ一覧シート」にて説明します。ここではメタデータを生成する関数がふたつ functions.php にあると宣言していることだけ覚えてください。
2. サイト骨格
第 2 パートはサイトの骨格（フレーム）を扱っています。この図に示す様に 5 パーツしかありません。しかしブログを表示するうえで絶対に必要なパートです。
3. ブログパーツ
第 3 パートは各フレーム内に配置する部品、タイトル、日付、シェアボタンなどの項目を装飾するパートです。他の章と比べて圧倒的にボリュームのある、ブログのメイン装飾部です。
ワードプレステーマを自作しなくても、ブログ運営する人はカスタマイズする部分です。
全部を解説するスペースが無いため、注意点だけ説明します。
記事本文の見出し (h1, h2, h3) や、本文中の装飾 (p, ul, ol, blockquote) についてはこのパートで修正してください。後ほど説明する第 5 パートではありません。
POCO では記事本文のフレームとして以下の ID が定義済みです。
- #pre-content (3.2)
- #body-content (3.3)
- #post-content (3.4)
見出しの装飾、本文の行間や上下スペース、または引用ボックスの装飾などはすべてここで行われています。
4. レスポンシブレイアウト
PC とスマートフォンで別々に最適なコンテンツ表示を行う「レスポンシブレイアウト」はどのサイトでも標準実装です。
POCO でもレスポンシブデザインは標準機能ですが CSS コードはひとくせあります。 style.css の第 4 パートは実際には単独で存在する内容ではありません。
これまで実装してきた部品が PC とスマホで表示が変わる場合、この第 4 パートで別々に実装します。特に第 2 パートのフレームでは不可欠なパートです。
上の図にあるように、第 1 パートから第 3 パートまで「4.レスポンシブデザインを参照」とコメントが書かれている項目があります。このコメントが書かれている項目はさらに 4.1 (PC 表示)と 4.2 （スマホ表示）を見る必要があります。それぞれ個別に実装されています。
なぜこんな面倒くさいことをしているのでしょうか？制作者自身が忘れないようにするためもありますが、各コードに関連性を持たせて実装内容に不明な点が残らないようにするためです。
この実装により、ユーザーは端末の違いを意識することなく最適な表示（モバイルフレンドリー）を提供できます。
エクセルシート内にてレスポンシブデザインとなる CSS 項目には●と書かれています。△の項目は例外で、その項目は CSS ではなく PHP でレスポンシブ処理をしています。
具体的な処理内容はソースコードをご覧ください。
5. その他の装飾
第 5 パートは各ブログで独自に用意する装飾の欄です。ご自由にお使いください。
div タグでアフィリエイトリンクを装飾したり、独自のボックスを用意する場合はここにコードを記載してください。
以上、 POCO はこの 5 パートで構成されています。
メタディスクリプションの実装ページタイプ一覧シート
メタディスクリプション（要約文）は SEO の必須対策です。検索エンジンに各ページの概要を提供しないと検索ランクに大きく影響します。
POCO ではヘッダにて以下のコード生成処理を呼び出します。
- 一般的なメタディスクリプションタグ (meta)
- OGP, Twitter Card
- JSON-LD 構造化マークアップ
しかし上記のすべての項目はページタイプによって生成コードを分けています。
エクセルシートの 2 番目は「メタディスクリプション」シートです。ページタイプによって生成するコードを●で管理しています。
カテゴリとタグページは通常のメタディスクリプション処理のみ、残りのタイプはほぼすべてを生成します。
この表の実際は header.php にて見ることができます。具体的な生成処理は functions.php にあります。ご確認ください。
設定の一覧と使用ファイルの一覧シート
最後は「設定」シートです。
POCO 独自の変数（設定）は poco-settings.php で定義されています。このエクセルシートで変数の一覧を管理しています。
どの変数がどのファイル（ページ）で、何回使われているのかがシートに記載されています。空欄は使用ナシ、数字は各定数の登場回数です。
万が一ソースコードの修正が発生しても、このシートを参考に修正漏れを防ぐ手助けとなるはずです。
まとめ
ワードプレステーマを制作するには html, php, CSS (+ Javascript) といった複合的な知識が必要です。 POCO では Javascript がない分、ブログテーマの中身がよりシンプルになっているはずです。
すべてのコードをサイト内で解説できませんが、無料でお配りしているのでお役に立てればうれしいです。