【ブログ】Xeory Baseテンプレート導入とカスタマイズ

      2016/02/10

xeory

久しぶりにWordpress(以下WP)テンプレートのリニューアルを行いました。
今回は、バズ部さん製作の無料テンプレート「Xeory Base」を導入させていただきました。
Xeory-無料WordPressテーマ-

Xeory はバズ部の運営ノウハウをもとに完成させたコンテンツマーケティングのためのWordPressテーマです。どなたでもコンテンツマーケティングを行い、WEB上に良質なコンテンツを数多く生み出して頂けるように無料で提供させて頂いております。

ありがたいです。
私が自前ブログを始めた頃(2004年)は、優れたテンプレートなどほとんど無くて(あっても海外なので上手に弄れない)、たまたまお知り合いになった小粋空間さんが作られたMovable Typeテンプレートを使わせてもらって、同じテンプレを使っているブログ友達さんとコメント欄でカスタマイズ方法を教え合うという交流をしていました。今のブログシステムより格段に出来ることが少なかったのでカスタムは大変でしたが、おかげでHTMLやCSS、レンサバなど随分詳しくなったので、とても良かったと思っています。
その後、Movable TypeからWPに移行して、何回かテンプレを変更してきましたが、その度にシステムのバージョンアップやら最近のトレンドやらを知ることが出来るという意味で、テンプレ変更は非常に有意義だったりします。

■Xeory Base導入

このXeory Baseというテンプレートは、シンプルでありながら高機能です。SNSとの連携やSEO対策、LP(ランディングページ)、CTA(Call to action)などが簡単に実装できるので、コンテンツマーケティングにも最適なテンプレと言えます。もちろん、普通のブログとしての使い勝手にも優れています。現時点では「Stinger6」と「Xeory」がWPテンプレの双璧だと思います。

インストール方法は下記の通り。
Xeoryテーマのインストール方法
Xeoryインストール後の初期設定

後はWPで諸々設定を行えばひとまず基本形は完成です。

標準テンプレから変更したい場合はここから。下記、備忘録です。

■子テーマ作成

これまでの癖ですぐにカスタマイズを始めてしまったのですが、これは失敗。いつの間にか「子テーマ」なる仕組みがWPに導入されていて、これを使うことでテンプレートがバージョンアップしてもカスタマイズが活かせるのでした。いやあ、浦島太郎でした。というか、随分前からこの仕組みあったのですね。勉強になりました。
なので、改めて子テーマを作成してカスタムを開始しました。
子テーマの基本と作り方は下記参照。
WordPressをカスタマイズする前に子テーマを作っておく | WPnavi
ひとまず、FTPソフトで「子テーマ」フォルダ作ってcssファイルを放り込んでから、WPで子テーマを有効化します。で、親テーマからカスタマイズしたいファイルをFTPで「子テーマ」フォルダにコピーして弄っていけばOKです。カスタマイズ始めると、頻繁にファイルの出し入れするので、ローカルに親テーマのファイルを解凍保存して適宜FTPでアップロードすると便利です。なお、CSSはバリバリに弄るので、上記記事にあるImport行を削除して、親テーマの内容をそのままコピペしておきます。

■Google fontsの導入

まずはフォントを好みのものに変更。
Google fontsで「Quicksand」を選択して、「Quick Use」ボタン(右下の真ん中)を押して、使いたいスタイルを選択して、子テーマのCSSファイルに下記を記載。

さらにCSS内でフォントを変更したい各class箇所に下記(私の好みです)を記載。(base.cssのbodyにも書いたのですが反映されず、style.cssの各classに書きました。)

■個別記事下にスポンサー表示

Xeory標準機能の個別記事下ウィジェットにアフィリエイトバナー標準234x60を3つ置いてみたのですが、記事と広告がはっきりわかるように表示したいと思って、「Sponcered by」の画像ファイルをウィジェットの一番上に貼り付けて、上下のマージンをPタグで調整しました。(「Master post advert」プラグインで自動表示させているmoreタグ下も同じ。)
こんな感じ。
sponcer

■SNS購読にfacebook追加

個別記事下にある「SNSでもご購読できます」のボタンがデフォルトだとTwitterとFeedlyの2つだったのですが、facebookも追加して3つに変更しました。
子テーマフォルダのsingle.php(作ってなければ親テーマからコピペして作成)のpost-sns部分を下記に変更。

style.cssの下記部分のwidthを50%から33%に変更。

さらにstyle.cssに下記を追加。post-snsのところに。

仕上がりはこんな感じ。
sns

■Socialボタンをフラットデザインに変更

デフォルトのSocialボタンが何だか浮いていたので、フラットデザイン風に変更しました。
まず、新規で下記を書いたsns.phpを作成して、子テーマフォルダにアップロード。

子テーマフォルダのsingle.php(作ってなければ親テーマからコピペして作成)のpost-heade-meta下とpost-footer下の下記を書き換え。
(旧)

(新)

style.cssに下記を追加(commentの前くらい)。

仕上がりはこんな感じ。
social

ひとまず以上です。

その他は標準機能とプラグインで対応しています。
ついでに肥大化していたプラグインも大幅に見直して減らしました。新規追加はコメント欄を充実させる「Comments Evolved for WordPress」のみ。

久々にカスタマイズなんかやりましたが、自分の好きな形に染めるというのはやはり気持ちが良いものですね。

■SocialボタンにRSSとFeedlyを追加(02/08追記)

single.phpに下記を追加。(【アドレス】部分は、【】ごと削除して、ブログのURLに変更。うちだとkazunoblog.com)

style.ceeに下記を追加。

仕上がりはこんな感じ。
sns002png

■footerにWPバージョン名とテンプレート名を追加(02/10追記)

フッターにWPのバージョン名とテンプレート名を追加しました。footer.phpを下記に変更。ブログ開始年(2004年)も追記。

 - Customize ,