Simplicityテーマのファイル構造について説明

ファイル構造

Simplicityのファイル構造について説明します。

僕は、Ruby on Railsの設計理念の1つDRY(Don’t Repeat Yourself)「同じことを繰り返さない」という考え方が好きなので、なるべく同じコードを書く箇所はテンプレートを切り分けて1ヶ所に書くようにしています。

ですので、ファイル数が多少多くなっていますが、なるべく簡潔に書くためと、編集のしやすさを考えた結果このようになりました。

photo by Michael Holley

Simplicityのファイル構造

以下でそれぞれのファイルの役割について説明します。

マークがついているものは、一般的にWordpressでよく使われるファイル。)

より詳しい解剖シートは以下を参照してください。

カスタマイズの参考に、Simplicityの「投稿ページ」の詳細な解剖シート
ズボラしき世界を運営されているシマコさんが.Simplicityの投稿ページの詳細な解剖シートを作られました。 image by ズボラし...
css

スタイルシートの機能を拡張するためのCSSファイルを保存しておく場所。

images

画像などを保存しておく場所。

js

JavaScript関連の外部ファイルを保存しておく場所。

lib

テーマで使用する関数などを保存しておく場所。

lightbox

Lightboxファイルを保存しておく場所。

page-template

固定ページ用のテンプレートを保存しておく場所。

responsive-test

ローカル用のレスポンシブテストファイルを保存しておく場所。

skins

スキン機能に関するファイルを保存しておく場所。

webfonts

Font AwesomeのWEBアイコンフォントの置き場所。

404.php

ページが存在しない場合に表示されるテンプレート。

ad.php

関連記事下もしくは、本文中広告のためのテンプレート。

ad-article-footer.php

記事下広告のためのテンプレート。

ad-sidebar.php

サイドバートップの広告のためのテンプレート。

ad-top.php

タイトルした広告のためのテンプレート。

analytics.php

Google Analytics等、アクセス解析などのタグのためのテンプレート。

author-link.php

投稿者情報のためのテンプレート。

before-main.php

メインカラム手前に何かを挿入する時に用いるテンプレート。3カラムなどにしたいときに使用しますデフォルトは空になっています。

breadcrumbs.php

投稿ページのパンくずリストのためのテンプレート。

breadcrumbs-page.php

固定ページのパンくずリストのためのテンプレート。

category.php

カテゴリページのためのテンプレート。

comments.php

コメント欄のためのテンプレート。

comments-default.php

通常のコメント欄のためのテンプレート。

comments-thread.php

スレッド掲示板大夫ノアコメント欄のためのテンプレート。

css-custom.php

テーマカスタマイザーで変更したデザインを反映させる処理を書くためのテンプレート。

datetime.php

「投稿/固定ページ」の公開日・更新日を表示するためのテンプレート。

edit-link.php

管理者が編集するためのリンクのためのテンプレート。

editor-style.css

エディター画面のためのスタイル。

entry-body.php

投稿記事の本文表示部分のテンプレート。

entry-card.php

投稿一覧部分に使用するサムネイルカードのためのテンプレート。

footer.php

フッター部分。

footer-insert.php

フッター部分、</body>手前にちょっとしたタグを挿入したい時に使用します。

functions.php

テーマ用の関数を書くファイル。

header.php

ヘッダー部分。

header-css.php

CSSに関するヘッダー呼び出しを書くためのテンプレート。

header-css-mobile-responsive.php

モバイルや、レスポンシブ設定で利用するためのCSS呼び出しを書くためのテンプレート。

header-insert.php

ユーザーがヘッダー部分、<head></head>内にちょっとしたタグを追加したい時に使用します。子テーマ内に入っています。

header-javascript.php

JavaScriptやjQueryプラグインの呼び出しを書くためのテンプレート。プラグインでCSSを利用する場合は、こちらにまとめて書いています。

header-logo.php

サイトタイトル部分を編集するためのテンプレート。

header-ogp.php

Facebook OGP表示のためのテンプレート。

header-seo.php

noindexなど、内部SEO最適化のためのテンプレート。SEOの設定変更など。

header-title-tag.ph

ヘッダーのタイトルに関する処理を書くためのテンプレート。

header-twitter-card.php

Twitter Cards情報表示のためのテンプレート。

home.php

トップページ用のテンプレート。

htaccess.txt

ブログ高速化のために、ブラウザキャッシュと圧縮転送のための設定が書いてある。

index.php

メイン部分。

javascript.js

JavaScript、jQueryをまとめて書くためのファイル。子テーマに同名ファイルを作成すれば、親テーマの後に続いて呼び出される。

list.php

記事の一覧部分のテンプレート。

mobile.css

モバイル端末用のスタイルシート。

navi.php

ナビゲーション(メインメニュー)のためのテンプレート。

new-entries.php

サイドバーの新着記事用のテンプレート。

new-entries-large.php

サイドバーの大きなサムネイル新着記事用のテンプレート。

page.php

固定ページのテンプレート。

page-link.php

記事が分割されているときに出るページナビゲーションのためのテンプレート。

popular-entries.php

サイドバーの人気記事を表示するためのテンプレート。(コメント基準)

popular-entries-large.php

サイドバーの大きなサムネイル用の人気記事を表示するためのテンプレート。(コメント基準)

popular-posts-entries.php

WPプラグインのWordpress Popular Postsをインストールしたときにサイドバーに表示される人気記事を表示するためのテンプレート。 (ページビュー基準)

popular-posts-entries-large.php

WPプラグインのWordpress Popular Postsをインストールしたときにサイドバーに表示される大きなサムネイル用の人気記事を表示するためのテンプレート。 (ページビュー基準)

post-navi.php

デフォルトのページ送りナビ用のテンプレート。

post-navi-thumbnail.php

サムネイルつきののページ送りナビ用のテンプレート。

Readme.txt

Simplicityに関することが書かれています。

related-entries.php

記事下の関連記事のためのテンプレート。

related-entries-thumbnail.php

関連記事をサムネイル表示するためのテンプレート。

responsive.css

レスポンシブデザイン用のスタイルを書くためのスタイルシート。

screenshot.png

テーマのためのスクリーンショット画像。

searchform.php

検索フォームのためのテンプレート。

sidebar.php

サイドバー部分。

single.php

投稿記事のテンプレート。

sns-buttons.php

記事下SNSシェアボタンのためのテンプレート。

sns-buttons-balloon.php

吹き出し付き独自シェアボタンのためのテンプレート。

sns-buttons-default.php

SNSサービス固有のシェアボタンのためのテンプレート。

sns-buttons-icon.php

小さなSNSシェアボタンのためのテンプレート。主にモバイル使用目的。

sns-buttons-sharebar.php

追従SNSシェアボタン用のためのテンプレート。

sns-buttons-top.php

ページタイトル下SNSシェアボタンのためのテンプレート。

sns-pages.php

SNSページへのリンクボタンのためのテンプレート。

style.css

デフォルトで使用されるスタイルシート。

theme-update-checker.php

テーマ自動更新用のライブラリ。

update-info.json

テーマ自動更新情報用のJSONファイル。

まとめ

最初は、ファイル数が多すぎて混乱するかもしれませんが、重複コードをなるべく避けた結果、このようになりました。

ファイルの意味さえ分かってしまえば、修正箇所をすぐに表示することができますし、短いコードは可読性を上げて、ソース編集の面倒くささを少しでも解消してくれるのではないかと思います。

スポンサーリンク
アドセンス(大)

コメント

  1. […] Simplicityテーマのファイル構造について説明 […]

  2. […] まず、どのソースを弄ったらいいのか分からないので、 Simplicityテーマのファイル構造について説明 を読みました。 […]

  3. […] 詳細は作者ページ「Simplicityテーマのファイル構造について説明」を参照してください。 […]

  4. よし乃 より:

    初めまして。わいひらさんのテーマ、使わせて頂きました。が、ブログ私には荷が重く辞めることにしました。アンインストールの方法を教えて頂きたいです。PCが苦手で、どうしたらいいののかわかりません。助けて下さい。

  5. わいひら わいひら より:

    「Wordpressテーマ アンインストール」と検索すればいろいろ方法は出てくるかと思います。

  6. よし乃 より:

    わいひらさん、できました。検索する言葉は同じでしたが、途中に空欄を入れたのが 良くなかったようです。
    簡単なことを質問して、恥ずかしいです。
    もう一つどうしてもわからないことがあります。WordPressのツールに削除が無いのです。今日でサーバーの契約が切れるので、このままでいいかなと思ってます。がどうですか?
    (ごめんなさい。わいひらさんに聞くのはおかしいですが、WordPressのサポートに連絡を
    といろいろ試しましたが、何をやっても繋がらなかったのです。)

  7. わいひら わいひら より:

    通常は、サーバーのコントロパネル内に削除する機能があるはずなんですけど。
    ただ、サーバーとの契約が切れるのでしたら、そのまま放置でOKかと思います。(よっぽど他の人に見せられないヤバイ内容でない限りは)
    しばらくした後、自動的にサーバースペースごと削除されるかと思います。

  8. よし乃 より:

    初歩的な質問に親切に答えて頂きありがとうございました。安心しました。
    ブログの内容は拙いものです。(^_^)
    わいひらさんを応援しています。