ワードプレステーマSTINGER8のカスタマイズしてました。
どうもこんにちわ！unianikiiです。
スゴイ雪降ってます。北陸パねえ！
１００記事超えてワードプレステーマいじりすぎてよくわからんようになったのでメンテナンスすることにしました。
ＳＴＩＮＧＥＲ８のカスタマイズ
私は「ＳＴＩＮＧＥＲ８」というテーマを使っているのですが、これがなかなかの放置プレイテーマ。
シンプルで良いという評判だったのですが、ＣＳＳとかＰＨＰとか全然わからない私。
仕方がないので、いろいろなブログ様に教えてもらってコピペで何とかやってきたわけですがもう限界。
はじめはちょっといじるだけだったのですが、それが徐々にエスカレートしていって結局どこをどういじったのかわからんようになってしまいました。
幸い、サイト自体がぶっ壊れたりなくなったりすることはなかったしこのままでもよかったのですが、「元に戻せない不安」が日々大きくなり取り返しがつかなくなる前にどげんかせんといかんと思ってしまったのでした。
思ってしまったはいいのですがどうしよう・・・
この際新しいテーマを入れようか。
でもそれはそれでかなりの「荒波に乗り出す冒険」感が漂っていて香ばしい感じ。
なので、テーマはこのままでウィンドウズでいうところの上書きインストールをすることにしました。
ＳＴＩＮＧＥＲ８子テーマのアンインストール
まずやったことは子テーマのアンインストールです。
前のテーマでは「header.php」とか「functions.php」とかに他のブログ様からもらってきたコードを対して理解してないままコピペしてきたのですが、湿気も書いた通り何をどういじったのか覚えていない有様で、これはもうテーマごと入れ替えるしかないなと。
というわけで「ＳＴＩＮＧＥＲ８」のページから子テーマだけをダウンロードしてインストール。
と思ったらどうも上書きインストールは出来ないみたいなので、いったん今の子テーマを無効化したうえで削除。
これで無事子テーマをインストールできました。
子テーマを有効化するとなんか懐かしい感じのシンプル画面になりました。
気持ちサイトの表示も軽めなような気がします。
これからこの子テーマをカスタマイズしていきます。
新しくやりたいこと
本当はノートとかメモ帳に変更点をメモっとくのがいいのでしょうが、ちょっと面倒だったのでコメントアウトの形式でコードにタイトルを付けておくことにしました。
これで不具合があったり、デザインを変えたくなってもわかりやすくなります。
新しいテーマでやりたいことは、
- 記事の一覧をカード型で表示する
- サイドバーのカテゴリー表示のデザイン変更
- トップページのサイドバーに新着記事を表示しない
- 関連記事をタイル型で表示する
- アドセンスのインフィード広告を使う
- サイドバーをスマホで表示しない
こんなところでしょうか。
他にもまだありますがそれはまた今度。
今回のカスタマイズはきにぶろぐ.com様を参考にさせていただきました。
内容はあまり理解できなかったのですが、なんかうまくいったので良し。
感謝してます。ありがとうございます。
早速カスタマイズなのですが、その前に必要なファイルを親テーマから子テーマにコピーしておきます。
私は「FFFTP」というFTPソフトを使っています。
親テーマを直接書き換えると、テーマのアップデートがあったり、コードに不具合があったりしたときに困ったことになるからだそうです。
子テーマは親テーマを読み込んだ後に読み込まれるので、不具合があった時は子テーマをだけをもとに戻すことで復帰できるというわけです。
なので、親テーマのファイルはいじっちゃいけません。
コピーするファイルは
- functions.php
- header.php
- itiran.php
- kanren.php
- newpost.php
- page.php
- sidebar.php
- single.php
実際にはその都度コピーしてましたが、よくカスタマイズに使われるファイルなので一度にコピーしてもいいでしょう。
記事の一覧をカード型で表示する
きにぶろぐ.com様のサイトを見てて記事一覧のカード型表示がかっこよくて簡単そうだったのでやってみることにしました。
私は説明がうまくないし、「他人のふんどしで相撲を取る」ような気もするので興味がある方は直接きにぶろぐ.com様のこちらのページをどうぞ。
結果はどうかというと、
が
こうなりました。
タイトルの背景色をちょっと変更しただけであとはそのままです。
おおむね満足です。
サイドバーのカテゴリー表示のデザイン変更
記事を書くときに思い付きでカテゴリーを追加していった結果、親も子もめっちゃ増えて重複するようなものもたくさんあったのでちょっと整理しました。
そのカテゴリーをサイドバーに表示したのですが、もともとのウィジェットではちょっと貧相だったのできにぶろぐ.com様のこちらのページを参考にカスタマイズしてみました。
結果はどうかというと、
が
こうなりました。
アイコンが入ってますがその辺もきにぶろぐ.com様のページを参考にしました。
おおむね満足です。
トップページのサイドバーに新着記事を表示しない
私のサイトはトップページが固定ではなくて新しく記事を書くたびに追加されていくのですが、横を見るとサイドバーにも新着記事が並んでいます。
これは無駄だと思ってサイドバーの新着記事をなくすことにしました。
参考にしたのはきにぶろぐ.com様のこちらのページです。
重複する記事をなくして、代わりに人気記事を表示することにしました。
記事ページでは新着記事が表示されるので安心です。
おおむね満足です。
関連記事をタイル型で表示する
記事の下にある関連記事が新着記事一覧と同じレイアウトで、ちょっとやぼったいなと思ったのでタイル型で表示することにしました。
参考にしたのはきにぶろぐ.com様のこちらのページです。
ちなみに関連記事の表示件数はデフォルトで５件で、そのままだと台形みたいな並びになるので、表示件数を６件にしました。
具体的には子テーマのファイル「kanren.php」の
を
に変更しました。
結果はどうかというと、
が
こうなりました。
おおむね満足です。
アドセンスのインフィード広告を使う
せっかくアドセンスをやってながらインフィード広告を使っていなかったので、使ってみることにしました。
というかそもそもインフィード広告をよく理解していなかったので、ちょっと調べてみると、記事の一覧に「さりげなく織り交ぜられる広告」なんだそうです。
いろんなサイトで見たことがあるアレですね。
またまたですがきにぶろぐ.com様のこちらのページで詳しく解説されてますので興味のある方は参考にされてください。
結果はどうかというと、
が
こうなりました。
記事をタイル化したので、それと合わせたサイズや配置を意識してみました。
おおむね満足です。
サイドバーをスマホで表示しない
私のサイトをスマホで見ると記事の下にずらーっとサイドバーの内容が並んでいました。
記事を全部読み切ってそのあとずーっとスクロールする人はあまりいないんじゃないでしょうか？
と思ってスマホのサイドバー表示をなくすことにしました。
でもトップページや固定ページからリンクがないのは何となく不安だったので、スマホのサイドバーをなくすのは記事のページだけにしました。
きにぶろぐ.com様のこちらのページで詳しく解説されてますので興味のある方は参考にされてください。
まとめ
すんなりいったかというとホントはそうでもないんですが、おおむね期待道理になりました。
きにぶろぐ.com様だけでなく他のサイト様の記事にも大変お世話になりました。
ありがとうございます。
まだまだレイアウトがくるっていたりで思い通りにはいきませんが、ちょくちょくカスタマイズしていきたいと思います。
ありがとうございました。