【WordPress】Xeoryのテーマをちょこっとだけカスタマイズする!前編

2015/08/11

 

Xeory ExtensionのテーマはSEOが最初からしっかりしてあって、凄く魅力のあるテーマなんですが、ちょこっとだけカスタマイズしたい箇所もあります。

 

長くなりましたので、前半と後半に分けて記事にしたいと思います。

カスタマイズする箇所

 

前半

 

・front(TOP)ページのでかい見出しを小さくする。

 

・人気記事と最近の投稿の順番を逆にする。

 

・front(TOP)ページのいらないコンテンツを削除する。

 

後半

 

・front(TOP)ページの記事のタイトルの文字を太くする。

 

・記事のフォントと文字の間隔を変更

 

・front(TOP)ページの記事のアイキャッチの粗さを直す

 

 

今の所はこんなところです。

デザインは好きなんですが、細かいところでカスタマイズしたい箇所がでてきましたので、ちょっとだけ直して生きたいと思います。

 

※phpを編集する時は必ずバックアップをして下さい。windows標準のメモ帳などではなく、テキストエディターのフリー版でもいいのでダウンロードして下さい。
バックアップの仕方が解らない方は、phpのところをカスタマイズすると最悪の場合は、真っ白になって戻せなくなります。

 

 

スポンサーリンク

スポンサーだよ

 

 

TOPページ(front-page)のでかい見出しを小さくする

 

Xeoryテーマ カスタマイズ1
TOPページのこの部分はXeory Extensionのメインの部分です。

 

しかしちょっとデカイです。PCで見た時にいきなり記事の部分が見えないので不便に感じる人もいるかもしれません。

かと言って勿体ないので、サイズを小さくしてみることにします。

 

 

Xeoryテーマ カスタマイズ2
Google chromeでF12を押すとデベロッパーツールが起動します。

 

 

そこでデカイ見出しの部分を見つけるべくどんどん掘り下げていくと、

 

 

Xeoryテーマ カスタマイズ3

メインの部分は #main_visual で、その下の行の wrap というclassだという事が解りました。

 

 

なので子テーマのstyle.cssに以下を記述

 

 

 

 

body.home #main_visual {

height: 150px !important;
}

 

が縦幅なので、そこはお好きなように幅を調節して下さい。

 

それによって、

body.home .wrap {
padding-top: 0px !important;
}

 

や、

 

body.home #main_visual h2 {
margin-bottom: 3px;
}

 

 

paddingmarginを調節します。

 

そして !important と記述して優先度を上げました。

 

 

Xeoryテーマ カスタマイズ4
これでようやくスッキリしました。

 

 TOPページ(front-page)の人気記事と最近の投稿の順番を逆にする

 

Xeoryテーマ カスタマイズ6

 

Xeory Extensionのテーマでは、TOPページで人気記事が一番最初に表示されます、次に最近の投稿。

人気記事がそのままの人はいいですが、最近の投稿を一番初めに目に飛び込んできた方いいですよね。人気記事ばっかり目がいって、最近の頑張って作った記事を見てくれないなんて悲しすぎます。

 

なの単純に位置をそっくりそのままま入れ換えます。

 

front-page.phpのここから

 

 

 

この部分を、最近の投稿の同じ部分がありますので、そっくりそのまま入れ換えます。

 

 

Xeoryテーマ カスタマイズ5
簡単ですね。

 

 front(TOP)ページのいらないコンテンツを削除する

 

 

Xeoryテーマ カスタマイズ7

Xeoryのテーマにはデフォルトで、front(TOP)ページにクローズアップ(注目)記事とサービス紹介、会社情報、そしてお問い合わせがあります。

 

 

Xeoryテーマ カスタマイズ8

クローズアップ記事は後々使うかもしれませんが、会社名やサービス紹介、お問い合わせは特に必要がないのでその部分を削除してみたいと思います。

 

 

front-page.phpの110行あたりから下にある

 

 

<!-- ここからテストソース - の下の、

 

 

クローズアップを削除するなら

 

の部分をごっそり削除

 

 

サービス紹介を削除するなら

 

の部分をごっそり削除

 

 

会社概要を削除するなら

 

の部分をごっそり削除

 

 

お問い合わせを削除するなら

 

の部分をごっそり削除

 

Xeoryテーマ カスタマイズ9

これでOKです。

 

逆にまた復活させたいなら、同じ部分にお好きなのを挿入して下さい。

 

 

後編へ続きます。

 

-WordPress, ブログ
-,