HAGANEYA(@imech_jp)です。

現在、WordPressのテーマをカスタマイズしようと悪戦苦闘しています。

今使っているものは「Pinboard」というテーマなんですが「レスポンシブWebデザイン(スマートフォン用のレイアウト)に上手く対応しきれていない」のと「海外製なのでカスタマイズの方法を手軽に調べられない」という理由で、カスタマイズに関しては半ばあきらめていたんですね。

そんな中「日本人作者による高品質のテーマは無いものか?」と探していたところ「STINGER5」と出会いました(当時の最新版は確かSTINGER2~STINGER3のベータ版)。

このテーマの最大のメリットは、何と言っても「ブログのアクセス数が伸びる可能性が非常に高い」ことでしょう。ただしあまりにも評判が良いため、STINGER5テーマを採用するブロガーの方々が増えた結果「見た目が一緒過ぎる!」という問題にブチ当たってるように思います。

もちろん、ブログの価値は間違いなく「コンテンツ」にあるため、見栄えなんて二の次です。無料ブログで魅力的な記事を書いている方々だって、山ほど存在します。

ただ、そうは言っても「最低限、デフォルトのSTINGER感は薄めたいなぁ。。。」と思ったので、Bitnamiというアプリケーションを使って「WordPressをローカル環境(PC内)に構築し、その中でSTINGER5をカスタマイズしていこう」と考えました。

以下の記事を参考にさせていただきました。ありがとうございます!

PCにWordPressを!BitNamiインストールと日本語化までの全手順|Naifix

スポンサードリンク

 

「themes」フォルダを探さなければならない理由

さて、なぜわざわざ「themes」フォルダを探す必要があるのかというと「子テーマを作って、そっちでカスタマイズしたいから」です。ちなみに今回の場合、親テーマにあたるのは「STINGER5」になります。

当初「テーマをカスタマイズするのであれば、親テーマを直接いじれば良いんでしょ?」と思ってた私ですが、このやり方にはデメリットが存在します。

デメリットとは「テーマを最新のバージョンにアップデートすると、設定した内容が一部消えてしまう」ことです。WordPressプラグインを利用してカスタマイズした箇所は特に問題ないんですが「手動で挿入したタグ」については、バージョンアップ時に消えてしまいます。

例えば当ブログでは「リサーチアルチザンライト」というアクセス解析ツールを使用しているんですが、このツールを設置するには、手動でタグをWordPressのソース内に挿入する必要があるんですね。

これが原因で、Pinboardテーマはアップデートする度にアクセス解析のタグが外れてしまうので、毎回タグを挿入し直しています。これを忘れたままだと「アクセス解析の数値がゼロ」の期間が発生し「Googleからペナルティでもくらったか?」と勘違いしちゃいますので。。。

 

Bitnamiの「themes」フォルダの場所

Bitnami内に構築した「themes(WordPressテーマが格納されている)フォルダ」の場所はこちらです。

1

C:¥Bitnami¥wordpress-4.3-0¥apps¥wordpress¥htdocs¥wp-content¥themes

 

Bitnamiにて構築したローカル環境で、誰にも見られずにWordPressテーマをカスタマイズする場合、themesフォルダ内に「子テーマ」というものを作って、そちらのほうを編集していくことになります。

子テーマの作り方については、こちらの記事を参考にさせていただきました。感謝です!

【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-|PresentNote

WordPressのカスタマイズするなら元のファイルは直接触らずに子テーマを作っていじろう|delaymania

 

実際にちゃんと「子テーマ」が作られるのかどうか試してみた

先ほどの記事を参考に、子テーマがきちんとテーマ一覧に生成されるのかどうか確認してみます。

まず、子テーマのフォルダを作る場所ですが、これは「親テーマと同じ階層(ディレクトリ)」です。子テーマと呼ぶぐらいなので、STINGER5(親テーマ)フォルダの下に作るのかなと思ってましたが、違うみたいですね。

2

 

続いて、子テーマのフォルダを開き、フォルダ内に「style.css」というファイルを作成します。このスタイルシート(css)ファイルを使うことによって、ブログやホームページの見た目を細かくカスタマイズしていくことが可能です。

3

 

この「style.css」をテキストエディタ(メモ帳など)で開き、以下のソースを記述します。子テーマの名前部分には、先ほど自分で作ったフォルダ名をそのまま入れればOKです。親テーマの名前部分には、これからカスタマイズしていくテーマの名前を入力してください。例えば、私の場合「stinger5ver20150505」となります。

4

/*
Theme Name:
子テーマの名前(child)
Template: 親テーマの名前(stinger5ver20150505)
*/

 

以上の作業をすべて終えたら、Bitnami内にインストールしたWordPressにログインし「ダッシュボード」→「外観」→「テーマ」内に、子テーマが表示されているか確認しましょう。無事に表示されていれば成功です。

5

 

最後に

正直ついこの前まで、子テーマの概念というか存在自体を知りませんでした。

子テーマを作ることによって、既存のテーマをカスタマイズするための敷居が大幅に下がるのは非常に助かりますね。今後、新しいWordPressテーマにお引っ越しする機会があるかどうかわかりませんが、その際は必ず子テーマを作ってカスタマイズしていこうと思います。

ちなみに、現在のテーマ(Pinboard)については、せっかく訪問してくださった方々に申し訳なくなるぐらい使い勝手が悪いです。管理人が不便に感じているのですから、訪問者の方々からしてみれば、それ以上に不便に感じているのではないでしょうか。

例えば、スマホだと記事タイトルの表示がバカでかくて、本文に行くまでに時間が掛かったり、関連記事をサクサクと辿っていけないもどかしさがあったりと本当にひどい有様です。また、タブレットでの表示も「タテ表示だと1カラムになってしまう」レイアウト崩れが起こってます。

IMG_6340

おそらく、現在使用中のテーマもカスタマイズ次第でレイアウト崩れは解消するのかもしれません。ですが、冒頭にも書いたとおり「海外製テーマなのでカスタマイズ情報が少ない」ため、これからCSSを勉強していこうと思ってる私のような人間には敷居が高いんですよね。

と・・・そんな言い訳をしてはみましたが、単純に「Pinboardに飽きたので、STINGER5に移行する」というのが本音です。

スポンサードリンク