CMS wordpress

【WordPress】第2回STINGER8のカスタマイズ

投稿日:2018年10月7日 更新日:

第一回と言いつつ全く再開していなかった以下の記事の続きになります。

【WordPress】第一回STINGER8のカスタマイズ

以前の記事で管理画面からCSSを編集していますが、これを行う前に確認するべき点があります

よく調べもせず記事にしてすいません…

テーマのカスタマイズは子テーマを利用する方法もあります。

そのメリットは以下です。

子テーマの変更はテーマアップデート後も適用される

前回の僕の記事のように、わざわざ子テーマを作成せずとも親テーマに直接変更を加えることもできます。

しかし親テーマをカスタマイズする一番の問題は、テーマアップデートの際に変更箇所が消去されてしまうことにあります

テーマアップデートを行わない手もありますが、Wordpress自体のアップデートによってテーマで使用されている関数などが非推奨になることがあります。

子テーマによる変更であれば親テーマをアップロードをしても、子テーマが消去されることはありません。

更新頻度が多いテーマであれば尚更、子テーマでのカスタマイズがおすすめといえるでしょう。

変更が簡単

WordPressのテーマを一から作成するのは大変です。

僕は当初テーマの自作を考えていましたが、これが超大変です。

それぞれのテンプレートファイルを作成するのはもちろん、CSSも自分で記述しなければなりません。

SEO対策やレスポンシブ対応などこだわりだすときりがありません。

子テーマを利用することで自分の変更したい箇所だけの記述に収まります。

また、仮に子テーマに記述したCSSが原因でデザインを壊してしまっても親テーマにはなんの影響もありません。

Stinger8の子テーマのインストール

STINGER8の子テーマはこちらからになります。

以下からインストールできます。

※親テーマをインストールしていることが前提になります。

インストールが完了したらWordpressの管理画面からテーマのダウンロードを行ってください。

子テーマによるカスタマイズ

カスタマイズに最低限必要なファイルは揃っています。

デザインのカスタマイズであればStyle.cssを編集します。

また、子テーマ自体もレスポンシブに対応しており、記述する個所によってどのデバイスで適用するか選択ができます。

PC表示のカスタマイズであれば、25~29行目あたりの以下に記述します。

/*media Queries PCサイズ(960px以上)
—————————————————-*/
@media print, screen and (min-width: 960px) {/*– ここまで –*/
}

また、子テーマによって各テンプレートファイルを上書きすることも可能です。

例えばトップページの投稿記事一覧を編集したい場合、親テーマであるSTINGER8ではトップページは「itiran.php」で表示しているようですので、このphpファイルを子テーマにコピー&ペーストを行います。

これで画面表示の際には子テーマの「itiran.php」が最終的に読み込まれますので、子テーマの「itiran.php」の編集内容が適用されます。

僕はこの方法で以下のようにカスタマイズを行いました。

※トップ画像と背景は管理画面から変更しています。

↓before

↓after

記事の領域を広げてボックスっぽくしました。

テーマのデザインを根こそぎ変更する場合はかえって時間がかかるかもしれませんが、少なくとも親テーマのデザインを踏襲したまま一部変更したい場合は子テーマによる変更が圧倒的に時間の短縮にはなると思います。

しかしデメリットも存在する

以下の記事でデメリットを解説してくれています。

「子テーマのデメリット」←サイトが重たくなるという落とし穴

親テーマの読み込み後に子テーマを読み込むのでもちろんサイトの表示速度が遅くなり、表示速度はSEOの評価基準の一つなっているのでSEO的にもマイナス要因になるようです。

今回の子テーマで具体的にどれくらいサイトのパフォーマンスに影響がでたのか今度測定してみます。

以上が今回のカスタマイズになります。

子テーマ全体のカスタマイズのめどが付けば、困ったところやWordpressのテーマの仕組みを記事にしたいと思います。

ここまで読んでいただいてどうもありがとうございました。

それでは、また。

-CMS, wordpress

関連記事

【WordPress】第一回STINGER8のカスタマイズ

今僕のブログで使用しているテーマを編集した記録を公開します。 正直まだ全然できてないので中途半端な記事になると思いますが、進展させるごとに追記をしていこうと思うので、暖かい目で見守っていただけたらあり …

WordPressのフック(hook)について

フックについて調べる経緯 WordPressでカスタマイズする、といえばテーマかプラグインについてだと思います。 WordPressがデフォルトで持つ機能といえば、管理画面で出来る機能です(当たり前で …

WordPressのテーマについて

WordPressのテーマとは WordPressでは、「テーマ」と呼ばれるファイル群を使ってWebサイトを表現しています。 テーマの中にhtmlやcss、JavaScriptなどのファイル群、そして …

試験問題・クイズ出題WordPressプラグイン「Quiz And Survey Master」の使い方!

このサイトでFEの試験問題出題機能を作成しようと思い、 せっかくだからプラグインをフルスクラッチで作成してやろうと動き出したんですが、 何から手を付けていいか分からない … 実装したい機能を羅列すると …

【WordPress】プラグイン作成③ ~管理画面の画面作成~

それではプラグインを作成していきます。 プラグインに最低限必要なのはプラグインファイルです。このあたりの作成方法は以下で解説しています。 参考記事 WordPress】プラグインの作成① プラグインフ …