Simplicityのファイル構造について説明します。
僕は、Ruby on Railsの設計理念の1つDRY(Don’t Repeat Yourself)「同じことを繰り返さない」という考え方が好きなので、なるべく同じコードを書く箇所はテンプレートを切り分けて1ヶ所に書くようにしています。
ですので、ファイル数が多少多くなっていますが、なるべく簡潔に書くためと、編集のしやすさを考えた結果このようになりました。
photo by Michael Holley
Simplicityのファイル構造
以下でそれぞれのファイルの役割について説明します。
( マークがついているものは、一般的にWordpressでよく使われるファイル。)
より詳しい解剖シートは以下を参照してください。
ズボラしき世界を運営されているシマコさんが.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ファイル。
まとめ
最初は、ファイル数が多すぎて混乱するかもしれませんが、重複コードをなるべく避けた結果、このようになりました。
ファイルの意味さえ分かってしまえば、修正箇所をすぐに表示することができますし、短いコードは可読性を上げて、ソース編集の面倒くささを少しでも解消してくれるのではないかと思います。
コメント
[…] Simplicityテーマのファイル構造について説明 […]
[…] まず、どのソースを弄ったらいいのか分からないので、 Simplicityテーマのファイル構造について説明 を読みました。 […]
[…] 詳細は作者ページ「Simplicityテーマのファイル構造について説明」を参照してください。 […]
初めまして。わいひらさんのテーマ、使わせて頂きました。が、ブログ私には荷が重く辞めることにしました。アンインストールの方法を教えて頂きたいです。PCが苦手で、どうしたらいいののかわかりません。助けて下さい。
「Wordpressテーマ アンインストール」と検索すればいろいろ方法は出てくるかと思います。
わいひらさん、できました。検索する言葉は同じでしたが、途中に空欄を入れたのが 良くなかったようです。
簡単なことを質問して、恥ずかしいです。
もう一つどうしてもわからないことがあります。WordPressのツールに削除が無いのです。今日でサーバーの契約が切れるので、このままでいいかなと思ってます。がどうですか?
(ごめんなさい。わいひらさんに聞くのはおかしいですが、WordPressのサポートに連絡を
といろいろ試しましたが、何をやっても繋がらなかったのです。)
通常は、サーバーのコントロパネル内に削除する機能があるはずなんですけど。
ただ、サーバーとの契約が切れるのでしたら、そのまま放置でOKかと思います。(よっぽど他の人に見せられないヤバイ内容でない限りは)
しばらくした後、自動的にサーバースペースごと削除されるかと思います。
初歩的な質問に親切に答えて頂きありがとうございました。安心しました。
ブログの内容は拙いものです。(^_^)
わいひらさんを応援しています。
いつもお世話になっております。
こちらの大変すばらしいテーマのおかげでブログを楽しく書かせていただいております。
不躾で恐縮ではありますが、ひとつお聞きしたいことがございます。
次のURLで表示される月間、日間一覧記事ページに広告を表示させたいのですが、どのファイルのどのあたりをいじればいいか皆目見当つかずにおります。
http://XXXXXX/XXXXXX/article/2017/07
http://XXXXXX/XXXXXX/article/2017/07/4
この点、ご教授いただきたく存じあげます。
お手間をかけますが何卒よろしくお願いいたします。
どの場所に表示させるかによって、編集場所が変わってきます。広告をどの部分に表示するのか、詳細を書いていただいてよろしいでしょうか。