WordPress「Cocoon」のテーマファイルを読んでみよう。①

アイキャッチ画像

はじめに

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

基本的にはこの「index.php」が呼ばれて、そこから色んなテンプレートを呼んでいます。
窓口的存在ですね!
テンプレート階層でこれより優先されて呼ばれるファイルもあるので、一概には言えませんが。

では早速中身を見てみましょう。

index.php の中身

index.php の中身

えっ、これだけ?

そう、これだけです。

上から順番に読んでいきましょう。

テーマ情報

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 に書かれています。

おまじない

PHP
if ( !defined( 'ABSPATH' ) ) exit;

これはWordPressのおまじないと思って良いでしょう。

直接ファイルにアクセスされないようにするものです。
興味がある方は調べてみて下さい。

ヘッダー

PHP
<?php get_header(); ?>

これは、WordPress の テンプレートタグ と呼ばれる独自の関数です。
PHP の関数とは違うので注意が必要です。
これにより、テーマ直下の header.php が呼ばれます。
ほぼ必須のコードですね!

次回はこのファイルを読んでみたいと思います!
一般的には<head></head>と<body><header></header>までが書かれている事が多いです。

IF文

PHP
if (!is_user_agent_live_writer()) {

if はもしも○○だったら ですね。
この○○の部分が ()内に書かれています。

! は論理演算子 の否定です。つまり ○○じゃなかったら です。

is_user_agent_live_writer() これは何かのメソッドのようですね。
分からない時はまずググる。

https://www.google.com/search?q=is_user_agent_live_writer()&oq=is_user_agent_live_writer()&aqs=chrome..69i57j35i39.1063j0j1&sourceid=chrome&ie=UTF-8

少し調べた結果、Cocoon 独自のメソッドのようですね。
ここで少し小ネタを。

メソッドにカーソルがある状態でF12 を押してみて下さい。
もしくは Ctrl 押しながらメソッド名をクリック。

これでこのメソッドが定義されている場所に飛べます。

そこでコメントとして
//ユーザーエージェントが、Windows Live Writer、もしくはOpen Live Writerかどうか
と書いているのでそういうメソッドなのだなという事が分かります。

もっとすんなり行くかなと思ったけどかなり思い記事になりそうなので、
これ以上追うのはやめておきます。💦

重要なのはその先の

PHP
get_template_part('tmp/list');

この部分ですね。

get_template_part() は何のメソッドでしょうか?
ググってみましょう!

https://www.google.com/search?q=get_template_part%28%29&sxsrf=ALiCzsZGCaQvg0uUhfXmM5j8nSMXqnYPCQ%3A1667900220418&ei=PCNqY_6TGcK2oASklrfwDQ&ved=0ahUKEwj-oaLBpJ77AhVCG4gKHSTLDd4Q4dUDCBA&uact=5&oq=get_template_part%28%29&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQgAQyBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB4yBAgAEB46CggAEEcQ1gQQsANKBAhBGABKBAhGGABQxglYtAxgtC1oAnABeACAAYIBiAHaAZIBAzEuMZgBAKABAcgBCsABAQ&sclient=gws-wiz-serp

今度は WordPress の関数のようです。
これは良く使う関数で、別の場所にあるファイルをここで呼ぶための関数です。

ここで問題です。

ここで呼ばれているファイルはどこの何でしょうか?

分かった方はカレントディレクトリ(index.php)からの相対パスで答えて下さい。
コメントお待ちしております。

次回はこの先をどんどん追っていきたいと思います!

フッター

PHP
<?php get_footer(); ?>

これは、WordPress の テンプレートタグ と呼ばれる独自の関数です。
PHP の関数とは違うので注意が必要です。
これにより、テーマ直下の footer.php が呼ばれます。
ほぼ必須のコードですね!
はい、そうですね、header の部分と同じですね。

<footer>や</body>タグの前に書くやつが書かれている事が多いです。
コピーライトなんかもここですね!

あとがき

このように、コードを解読する力は今後必ず必要になってきます。

なかなか読めるようになるまでは苦しいと思います。

読めるようになると、なぜそのような表示になっているのか?が分かるので
色んなカスタムが出来るようになります。

思いつきでこの企画を始めてみたのですが、案外壮大なものになりそうですね💪

次回で続きをするか、別の題材にするかは考えていませんが楽しみにしていて下さい!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

fifteen − two =