CMS wordpress

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

投稿日:2018年4月16日 更新日:

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

カスタマイズしようと思った経緯

今の会社に入社したときはブログには興味があまりなかったが、業務でEC-CUBEやWordpress、Os-Classを触る機会がとても多いので、CMSをもっと深く知ろうと思いブログを始めました。
とりあえずxamppを使いローカル環境でテーマを作ったりしていたんですが、これじゃいつまで経っても本番に移行できんなと思い、見切り発車気味ですがさくらのレンタルサーバを借りて運用を始めました。
とりあえずのサーバを借りてWordPressを導入するまでは(「ブログの始め方」を参照)問題なく終えれたんですが、テーマ選びが結構難航しました。テーマの量がえぐい。
無料テーマだと、見た目をかっこよくするのに管理画面でのカスタマイズだけでは出来ずファイルを直接書き換える必要があるみたいです。
有料だと1万円弱払えばカスタマイズの自由度が高いテーマを導入できるみたい。
あと有料テーマの多くはSEO対策のポイントが抑えられているらしい。
参考:SEOについて(wiki)
上記のwikiではどういったコーディングが望ましいか例示しているがそもそもSEOに関するアルゴリズムは非公開らしい。wikiを見る限りテーマが関与しそうなところに関しては、「titleとmetaはちゃんとしろよ!見出しはちゃんとh1でくくれよ!」くらいかな。
SEOに興味があるし備忘録ブログなので、無料テーマで実現したいことは自分の手で実装していきたいと思います。

カスタマイズ対象テーマ

無料のプラグイン「STINGER8」にしました。理由は、よく見るブログがこのテーマを使っている&シンプルだったのでこれにしました。テーマ比較にあんまり時間は使っていないのでよく厳選するともっと便利なテーマがあるかもしれません。

管理画面でできること

管理画面でもできるのにコード書き換えやっちゃうと競合して落ちる!とかなると怖いから管理画面でできることは把握しとこう!

1.サイト基本情報の変更

サイトのタイトルとキャッチフレーズとサイトアイコンの登録ができる。

2.背景色の変更

ヘッダーだけとか柔軟な設定機能はなし。全部変わる。

3.ヘッダー画像の登録・変更

ヘッダーが画像をアップできるだけ。場所変えたりは無理。

4.背景画像

画像の元サイズに合わせて、拡大したり折り返したりできる。背景画像に関してはこの機能で十分。

5.メニュー

メニューの位置としてヘッダーメニュー、フッターメニュー、スマホ用メニューがある。表示する項目変更できるだけで、見せ方(アイキャッチ画像を表示する)などの選択・変更はできない。

6.ウェジェット

サイドバートップ、サイドバー、スクロール広告用の3か所に差し込み可能。

7.ホームページ設定

トップの固定ページ表示機能っぽいけどよくわからん。

8.追加CSS

サイトの外観、レイアウトのCSSを追加できます。

追加CSSに以下の内容を記述します。

#headbox-bg{
background-color: #000;
}

上記の記述でカスタムへニュー項目の色が変わります。

この項目で既存のCSSを変更ができます。レイアウトちょこっと変えたいだけならファイルを変えるよりこっちの方が安全そうですね。
ちなみに反映したい場所のクラス名を知りたい場合は、F12押して確認するか、Wordpressのstyle.cssを参考にすれば簡単に編集できると思います。

その他

「投稿一覧」の一括編集でコメント欄をなくすことができます。その他設定変更は諸々あるけどレイアウトに関してはこれくらいかな?

シンプルを売りにしているテーマで、かつ無料のテーマなので幅広いカスタマイズは直接ファイルを書き換えないと難しいかも。
ただ、記事を見やすくしたり使いやすくすることはプラグインを導入することで可能だと思うので、こちらもまた紹介したいと思います。

-CMS, wordpress

関連記事

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

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

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

第一回と言いつつ全く再開していなかった以下の記事の続きになります。 【WordPress】第一回STINGER8のカスタマイズ 以前の記事で管理画面からCSSを編集していますが、これを行う前に確認する …

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

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

【WordPress】プラグイン作成② ~管理画面にメニューを追加~

フックを使って管理画面にプラグインメニューを追加 前回、プラグインの入れ物を作成し、プラグインメニューに追加しました。 現在処理はなにも記述されていませんので、実施に機能を搭載していきたいと思います。 …

WordPressのテーマについて

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