WordPress でWeb制作をしている方なら1度はお世話になるであろうテーマの「Cocoon」。
いつも検索する時に、”c” が2つなのか、”o” が2つなのかが分からなくなります。
※正解は “o” が2つ。
Xserver との業務提携が発表され、どのように進化していくのか楽しみにしています！
テーマ自体は簡単にインストールが出来て、サイトの作成もノーコードでも行えてしまうので
案外テーマファイルをじっくり読んだ事がある方は少ないかもしれませんね。
しかし、コードを読むというのはカスタマイズしたり、自作する上で必須の能力になります。
簡単にではありますが、テーマファイルの中身を見て行きましょう！
https://wp-cocoon.com/downloads/
このサイトよりダウンロード出来ます。
この辺りはググれば記事も出てきますので省略します。
普通の流れとしては圧縮されたまま WordPress にインストールするのですが、
あえて、自分のPC上で解凍してみます。
結構時間かかったので、どれくらいのファイル数なのか調べてみると、3460個もありました！
それをVSCodeで開き、中身を確認していきます。
この中でフォルダ（左に > がついているもの）はひとまず置いといて、
まずはファイルを見ていきましょう！
他のテーマでも共通して使われるファイルなのは上から、
- 404.php（存在しないページですよの中身）
- footer.php（フッター）
- function.php（関数を定義してる）
- header.php（ヘッダー）
- index.php（まずはここが呼ばれる）
- page.php（投稿ページの基本テンプレ）
- search.php（検索ページ）
- sidebar.php（サイドバー）
- single.php（固定ページの基本テンプレ）
- style.css（CSS、テーマ情報）
この辺りですね。
このように部位毎にファイルを分けておき、色んな場所で使い回せるようにしているわけです。
もっと詳細な部位は、tmp フォルダの中に入っていたりします。
テーマによって場所やフォルダ名は違う事があります。
基本的にはこの「index.php」が呼ばれて、そこから色んなテンプレートを呼んでいます。
窓口的存在ですね！
テンプレート階層でこれより優先されて呼ばれるファイルもあるので、一概には言えませんが。
では早速中身を見てみましょう。
えっ、これだけ？
そう、これだけです。
上から順番に読んでいきましょう。
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/ここはテーマ情報が書かれています。
この部分に表示される情報は、テーマ直下の style.css に書かれています。
if ( !defined( 'ABSPATH' ) ) exit;これはWordPressのおまじないと思って良いでしょう。
直接ファイルにアクセスされないようにするものです。
興味がある方は調べてみて下さい。
<?php get_header(); ?>これは、WordPress の テンプレートタグ と呼ばれる独自の関数です。
PHP の関数とは違うので注意が必要です。
これにより、テーマ直下の header.php が呼ばれます。
ほぼ必須のコードですね！
次回はこのファイルを読んでみたいと思います！
一般的には<head></head>と<body><header></header>までが書かれている事が多いです。
if (!is_user_agent_live_writer()) {if はもしも○○だったら ですね。
この○○の部分が ()内に書かれています。
! は論理演算子 の否定です。つまり ○○じゃなかったら です。
is_user_agent_live_writer() これは何かのメソッドのようですね。
分からない時はまずググる。
少し調べた結果、Cocoon 独自のメソッドのようですね。
ここで少し小ネタを。
メソッドにカーソルがある状態でF12 を押してみて下さい。
もしくは Ctrl 押しながらメソッド名をクリック。
これでこのメソッドが定義されている場所に飛べます。
そこでコメントとして
//ユーザーエージェントが、Windows Live Writer、もしくはOpen Live Writerかどうか
と書いているのでそういうメソッドなのだなという事が分かります。
もっとすんなり行くかなと思ったけどかなり重い記事になりそうなので、
これ以上追うのはやめておきます。💦
重要なのはその先の
get_template_part('tmp/list');この部分ですね。
get_template_part() は何のメソッドでしょうか？
ググってみましょう！
今度は WordPress の関数のようです。
これは良く使う関数で、別の場所にあるファイルをここで呼ぶための関数です。
ここで問題です。
ここで呼ばれているファイルはどこの何でしょうか？
分かった方はカレントディレクトリ（index.php）からの相対パスで答えて下さい。
コメントお待ちしております。
次回はこの先をどんどん追っていきたいと思います！
<?php get_footer(); ?>これは、WordPress の テンプレートタグ と呼ばれる独自の関数です。
PHP の関数とは違うので注意が必要です。
これにより、テーマ直下の footer.php が呼ばれます。
ほぼ必須のコードですね！
はい、そうですね、header の部分と同じですね。
<footer>や</body>タグの前に書くやつが書かれている事が多いです。
コピーライトなんかもここですね！
このように、コードを解読する力は今後必ず必要になってきます。
なかなか読めるようになるまでは苦しいと思います。
読めるようになると、なぜそのような表示になっているのか？が分かるので
色んなカスタムが出来るようになります。
思いつきでこの企画を始めてみたのですが、案外壮大なものになりそうですね💪
次回で続きをするか、別の題材にするかは考えていませんが楽しみにしていて下さい！
./tmp/list
最近はchat gptに聞くことが多いです。
cocoonのファイルを見ていないので間違えてるかも。
一つ上にあることを想定してます。
ファイルが3000もあるとは、、
ここの意味が分からないですが、数をかぞえたら3000もファイルがあるということ？
しかし、勉強になります
簡単すぎましたか？
もっと難しいもの用意しておきます
そのままの意味でファイル数が3000以上あるという意味です！
なので、必要なファイルだけに絞って確認する事が大切ですね。