Cocoonカスタマイズ覚書 | ウェブカツ!プログラミング学習記

プログラミング勉強

こんにちは。ウェブカツ!女性割引にてプログラミング学習中のみや***です。

最近ウェブカツでの学習は少し横に置いて、ワードプレスのカスタマイズを行っていました。

目的は、私のことや、プログラミングを学ぶ中で製作したものを人にお見せするページを作るため、です。

ワードプレスの基本的な構造はウェブカツで学習済みですが、まだ手持ちのワードプレスサイトをカスタマイズするには至っていなかったので、この機会に改めて勉強しなおしました。

この記事では、世のブロガーさんに有名なテーマ「Cocoon」をプログラミング学習者目線で分解したカスタマイズ覚書を書いてゆきます。

Cocoonカスタマイズに必要なファイルの場所

Cocoonはプログラミングを知らない人でもカスタマイズができるように、最低限のファイルはダッシュボードの「テーマの編集」から触れるようになっています。

ですが、そこにある子テーマ内のファイルの数は限られているため、それ以上の変更をしようとするとどうしても親テーマのファイルにアクセスする必要があります。

wp-content → theme の中に

  • cocoon-child-master(親テーマ)
  • cocoon-master(カスタマイズ用の子テーマ)

があります。

cocoonを推奨通りの方法でインストールしていればcocoon-child-master(子テーマ)があると思うので、cocoon-master(親テーマ)からcocoon-child-master(子テーマ)へ、必要なファイルをコピーして編集してゆきます

親テーマを編集して失敗すると大変ですが、コピーした子テーマ内のファイルをいじる分には怖くありません

ちなみに今回はFileZillaを使ってファイルのコピー、置き換えを行いました。

あると便利なプラグイン

Cocoonはファイル数も多く、また1つのファイル内でいくつものファイルをインクルードしています。

そのため、構造を追っていくと途中で迷子になってしまったり、また自分で編集したのに反映されていない時に「何が読み込まれていないのか?」を見つけるのが最初は大変でした。

でも、Show Current Template というプラグインを使うと・・・

インストールして有効化するだけで、今読み込んでるファイルをずらっと表示してくれます!!

ファイルの関係性を把握するまでの間は特に、このプラグインに助けてもらいました。

作りたいものを把握

今回作りたいのは、こんな1枚ペラのページです。

HTMLでイチから書いていくと考えると特に変わったことはありませんが、このワードプレスサイト内の1ページとして作るとなると・・・

デザインも構成もかなり違うので、なんだか一気にハードルが上がりませんか?

でも、1つ1つやってゆけば大丈夫です。

必要なファイルを順に編集してゆく

作りたいのは固定ページです。

ワードプレスが固定ページを読み込む際のファイル名は、page.php

なので、子テーマ内にpage-miya.phpというpage.phpをまるっとコピーしたファイルを作成。そこに変更を加えてゆきます。

ファイル名のハイフン以降は、スラッグ名と同じであればなんでも大丈夫です。

では、Cocoonの固定ページがどんなファイルを読み込んでいるかを見てみましょう。

ここでは固定ページで作ったお問い合わせフォームのページを見てみます。

このページで呼び出しているファイルは、page.phpです。

該当のpage.phpファイルの中身がどんなかというと・・・

記述はたったこれだけ!

つまり、page.phpはハブ的な役目で他のファイルをインクルードしているだけのようです。

では、どのようなファイルをインクルードしているかパーツ毎に見てみましょう。

ヘッダー

page.phpが最初に呼び出しているのはheader.phpです。

header.phpにはhtmlのheadタグに書く内容が主に記述されています。

そのheader.php内ではbody-top.phpを呼び出しており、そのbody-top.php内でheader-container.phpを呼び出しています。

そのheader-container.phpファイルをいじると、ヘッダーの見た目に関わる変更が可能となります。

オレンジの枠線①がheader-container.phpに記述されている部分です。つまりヘッダー全体です。

ピンクの枠線②、はヘッダーのh1タグにあたる部分。こちらもheader-container.php内をいじることで編集可能です。

ピンク枠線③は、ナビメニューに当たります。

ナビをカスタマイズする場合は、header-container.php内で呼び出されているnavi.phpを編集してゆきます。

上記ファイル達をコピーして必要な箇所を変更・保存。

必要であればstyle.cssも編集してゆきます。

すると・・・

編集後のヘッダー

見た目が全然違いますね!かなり変わりました。

ちなみに、

↑のオレンジ枠の部分は、はじめは本文であるmainタグの中に入れたいと考えていました。

ですが、body幅いっぱいの背景画像を入れたい。でもcssを大きくいじりたくないし・・・どこをいじれば一番シンプルにできるかなーと探した結果

body-top.php内の”メインカラム手前に挿入するユーザー用テンプレート”を呼び出すコードの直後にhtmlタグをベタ書きして挿入しました。

body-top.php内

もっとスマートな方法があるのかもしれませんが、とりあえずはこれで思い通りになりました^^;

メインカラム

次は、本文となるmainタグ内をいじります。

この部分ですね。

ページ本文内を変えるだけならダッシュボードから普通に固定ページを編集するだけなので、簡単です!

今回は、最終的に仕上げたいページはcssをしっかりいじる予定だったので、VScodeでタグを含めて書き上げてしまってからダッシュボードの固定ページ編集欄にコピペしました。

パンくずリストを消す・投稿日を消すといった変更をかける場合は、以下の順にファイルをたどって該当コードを探してゆきます。

固定ページを表示しているpage.php内からpage-contents.phpへ、さらにそこからpage-contents.phpへ。その中にやっとcontent.php(本文エリア)の呼び出しコードがあります。

本文・コメント欄・上下のパンくずリストはpage-contents.php内で読み出されています。

サイドバー

最終的に作りたいページにサイドバーは必要ありません。

そして、サイドバーの削除は簡単です。

こちらも本文と同じくダッシュボードの固定ページから該当ページを編集モードにし、

右サイドにあるページ設定から任意のデザインに変更するだけです。

style.cssで仕上げ

html側が終わったら、style.css(子テーマ内)を整えてゆきます。

スマホビュー用のmedia@…もそのまま書けば反映してくれますし、開発ツールで見たらどんなクラス名がついているか一目瞭然なので、あまりつまづかずにできました。

 

ここまで終われば見事、デフォルトのテンプレートデザインとは全く異なるページが完成!

勝手にpタグが挿入される件について

aタグで囲んだimgタグの前後に勝手にpタグが挿入されてしまい、削除してもまた勝手につく。という症状にしばらくハマってしまいました。

どうやらワードプレスにそういう仕様があるようで、こちらの問題はコードを1行追加するだけであっさり解決しました。

<?php remove_filter('the_content', 'wpautop');  ?>
上記コードを、自動挿入させたくないコードの直前に追記するだけです。

JS・jQueryで動きを出したい!

まったく動きがないページだと少し寂しい気がして、おしゃれなふわっと感などを演出すべくJSコードを追記しました。

Cocoonなら、固定ページ編集欄の下部にJSコードを追記する枠が設置されています!

jQueryもCDNを読み込まなくともデフォルトで使用可能になっているので、とっても便利。

Font Awesomeを使いたい!

Font Awesomeを使いたい場合も、linkタグを挿入する必要はありません。

cocoonですでに読み込んでくれているので、iタグをHTMLの挿入したい箇所に貼り付けるだけです。

ただ、varsion5だとうまく表示されませんでした。varsion4だと問題なく表示されます。なんでだろー・・・

色々いじると発見がいっぱい

Cocoonは人気のテーマなだけあって、ユーザーさんが書いたカスタマイズ記事も多いです。

その中で、「Cocoonはカスタマイズしやすい設計になっている」という言葉を何度か見かけました。

私自身まだワードプレスのコードに慣れていないので、そのカスタマイズしやすさは実感できていないのですが、ファイル内のいたるところにコメントが書かれてあって、「このコードは何を読み込んでいるか」がプログライミング初学者にもわかりやすくなっています。

また、上記でも少し触れましたが

  • コード自体をいじらなくてもある程度見た目のカスタマイズができるようになっている
  • ちょっとしたカスタマイズならわざわざファイルをコピペしなくても可能

という使いやすさを実感できるテーマです。

プログラミング学習者目線で「ふむふむ、なるほどー」という部分と、純粋なユーザー目線で「これがユーザビリティ・・・!」と感じる部分とがあり、作者のわいひらさんにはいつも頭が下がる思いです。

他の有料テーマも使っていましたが、なんだかんだでCocoonに戻ってしまうくらい、良いです。

Cocoonの宣伝みたいになってしまいましたが、無料で高機能、ワードプレスに不慣れな方でもインストール手順は全てサイトで網羅的に解説してくれている親切なCocoon、おすすめです!

>>> Cocoonのサイトを見る

プログラミングを勉強したおかげで、視野がひらけた

私はワードプレスのユーザー歴だけは5・6年かもう少し長いくらいです。

なのに、つい最近まで「テンプレート??サーバー???難しい!」と感じて、カスタマイズは興味はあるのに手が出ないという状況でした。

でもウェブカツでプログラミングを勉強し始めて早半年。

私がこんな風にワードプレスのテンプレートファイルをいじれるようになるなんて・・・!

と嬉しい気持ちです。

 

正直に言うと、ウェブカツのワードプレス部で学んだことは本当にシンプルです。

シンプルすぎて、これで売れるテーマ作れるの!??いいの??と拍子抜けしてしまったくらいでした。(知っておくべき要点が詰められている、というのは理解しています)

ですが、今回ワードプレスをカスタマイズしてみて、ウェブカツで初めて学んだHTML/CSSから、全てが繋がってるんだーー!!をすごく実感しました。

そのウェブカツも、現在JavaScript上級。

もうすぐ卒業試験を視野に入れていかねばならないところまで来ています。

JS上級を再開したら、もっと頑張らねば。です。

>>>『オンラインプログラミング学習スクール・ウェブカツ!』の詳細を見る
規約上載せているもので、アフィリエイトリンクではありません

 

プログラミング初心者がウェブカツを始めて、1か月の感想と進捗。
ウェブカツにこの4月から入部して、ちょうど1か月経ちました。 プログラミング完全初心者からのスタートで、どんな感じ?どんな勉強してるの?という所を感想と共にシェアします。 この1ヶ月やったこと ウェブカツは、HTML・CSS・JS...

 

ウェブカツ | プログラミング初心者のPHPアウトプット作品できました
4月からウェブカツ!にてプログラミングを学習しています(女性割引利用)。 この2ヶ月半勉強してきて、一番「うぅぅ」と苦しみつつ進めたWEBサービス部。 そのアウトプット作品が、やっと出来上がりました。 これは、半月...

 

タイトルとURLをコピーしました