POCOの内部構造(CSS,PHP)が分かるエクセルシート
この記事は約 7 分で読めます
POCO では全ソースコードを無料公開しています。ご自由にダウンロードし、中身の解析や改造も自由にしていただけます。
しかしただソースコードを見ても学習は難しいのではないでしょうか。 POCO ではコメントに管理番号を割り振り、コード内のパーツを目次化して管理しています。そして各テーマファイルとパーツの関連性をエクセルシートで管理しています。
このページではこのエクセルシートに何が書かれているのか説明します。
POCO をダウンロードの際はこのエクセルシートも一緒にダウンロードしてください。そしてソースコードとこの表を比較することで、 POCO （ワードプレステーマ）の理解を深めることができます。
ダウンロード：poco-css-toc.xlsx (18kB)
CSSをベースとしたサイト構造説明と目次
このエクセルファイル内には3シートあります。その中で最も重要なのが「総目次」シートです。このシートには、 POCO のソースコードのどこに・何が実装されているかがすべて網羅されています。
上の図の例では「3.15 記事の公開日と更新日の生成パーツ」が functions.php, single.php に実装されていることを示しています。さらに style.css ではこのパーツの装飾コードもあります（ただしレスポンシブ対応はしていない）。
実際には●のあるファイルにコードが実装されているため、 page.php, index.php にも公開日と更新日の生成パーツは実装されています。
このように、 POCO には秘密の処理や実装は一切ありません。すべての部品をこの表で管理しているため、ソースコードのある部分を探すのに迷子になりません。
style.css ファイルを実際に開くと、コードブロックごとにユニークな番号が割り振られています。この番号により全5章分の目次が構成されます。
各ソースコード (php) 内にも同じ番号がコメントで記載されています。 CSS, php の各ファイルが単独で存在しているわけではなく、 CSS を軸に互いに関連していることがおわかりいただけます。
もちろんこういった記載がソースコードとして本来あるべき形ではありません。こうしたことには理由があります。
- 自分用の忘備録として、何を実装したが後で思い出せる
- POCO でワードプレスの中身を知りたい人へ、学習するための情報を提供する
全5章がどのように構成されているのでしょうか？もう少しだけ詳しく説明します。
1. 一般的な設定
第1章は CSS の初期化、汎用タグの設定、カスタムフォントの設定、その他 CSS に直接関連しないワードプレス側の処理を記載しています。
CSS の初期化と汎用タグ (a, body) については、ご自身のサイトイメージに合わせて修正してください。一般的な CSS の解説サイトが参考になります。
その他、ワードプレス関連処理については以下の内容が style.css にコメントで記載されています。
- functions.php の中で、ワードプレスの設定等ブログの表示に直接関係ない関数や定数をリスト化
- functions.php 内にある、メタデータ（メタディスクリプション）を生成する関数の一覧と説明
どちらもコメントのみで、 CSSのコードはありません。
functions.php はブログに高度な表示を行うために機能（関数）を追加できる php ファイルです。実際には拡張だけでなく、ワードプレスの設定などの地味な処理もあります。
しかしこういうコードこそ、ワードプレステーマのカスタマイズにて見落とされやすい項目です。
こういった見落とされやすい項目もあえて CSS ファイルにも書いておくことで、 どういうカスタマイズがされているのかを忘れないようにしています。そしてエクセルシートで他の PHP ファイルとの関連性を明記しています。
第1章にある定数の一覧についてはこのページの後半「定数の一覧と使用ファイルの一覧シート」で解説しています。併せてご覧ください。
メタデータの詳細についてはこのページの後半「メタディスクリプションの実装ページタイプ一覧シート」にて説明します。ここではメタデータを生成する関数が2つ 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 独自の設定は定数という形で functions.php で一覧になっています。このエクセルシートには定数も管理されています。
どの定数がどのファイル（ページ）で、何回使われているのかがシートに記載されています。空欄は使用ナシ、数字は各定数の登場回数です。
万が一ソースコードの修正が発生しても、このシートを参考に修正漏れを防ぐ手助けとなるはずです。
各定数の使い方については別ページを参照してください。
まとめ
ワードプレステーマを制作するには html, php, CSS (+ Javascript) といった複合的な知識が必要です。 POCO では Javascript がない分、ブログテーマの中身がよりシンプルになっているはずです。
すべてのコードをサイト内で解説できませんが、無料でお配りしているのでお役に立てればうれしいです。