無料WordPressテーマSentryのカスタマイズとまだ紹介していなかった機能+α

無料WordPressテーマ Sentry カスタマイズ適用後イメージ

さて、前回のエントリーで紹介させていただいた無料WordPressテーマのSentryですが

早速イジれそうな範囲でカスタマイズしてみました。と言っても機能的には完成されたテーマだと思いますので、個人の趣味レベルの内容かもしれませんがお役に立てば幸いです。

スポンサーリンク

前回のエントリーで紹介できなかった機能

カスタマイズに入る前に、前回のエントリーでまだ紹介していなかった機能から先に書いてみたいと思います。

記事の一覧表示について

Sentryでは新着記事やカテゴリーの記事一覧にページャーがありません。一覧表示の下にある「次の○件を読み込む」というボタンを押す事で、更に一定の件数づつ新着記事が表示されていく仕組みになっています。

Sentry 記事一覧の読み込み

この表示方法だと若干の読み込み時間はありますが、ページの遷移が発生しない為にその分ページ送りがサクサクと出来ますし、これがなかなかカッコイイので私がSentryを気に入ってしまった理由の一つでもあります。

個人的にわりと気になる部分

どんなに優れていてもさすがに一から十まで自分の理想通りのモノというのはなかなか無いものです。私がこれから挙げる内容に関してはあくまでも好みの問題ですので、それが良いとか悪いとかいう話ではありませんが、私としては少し気になるので後から調整しようかなと思っている部分になります。

ただ、今回のカスタマイズではまだそこまで触れていませんので、おいおい時間を作ってイジってみようかなとは思っています。

要素間のマージンが若干狭い

Sentry 要素間のマージン

特に投稿下のカテゴリーが表示される辺りからでしょうか。Facebook・Twitterのいいね!ボックスにシェアボタン、ページャー、関連記事が少し窮屈な印象を受けます。

全体的にフォントが小さい

Sentry フォントが少し小さく感じる部分1

Sentry フォントが少し小さく感じる部分2

見出しは全体的にもう少し大きくてもいいかなと思います。特に小さいと感じるのが、TOCの見出し・表示/非表示の切り替え、スポンサードリンクの文言でしょうか。

メインカラムとサイドバーの幅が不安定

PCで見た時にサイドバーがやけに広かったりそうでなかったりする時があります。見出しの文字数なども影響しているのかもしれませんが、メインカラムに表示しているページが変わったりサイドバーの人気記事のタブを切り替えるだけでメインカラムとサイドバーの幅が伸びたり縮んだりする事もあったような…

とりあえずフロントページと固定ページ・エントリーで違う感じでしょうか。

記事一覧のサムネイル

投稿に設定しているアイキャッチ画像のサイズが小さかったりアスペクト比(4:3とか16:9とかそういうのです)によるものかはわかりませんが、記事一覧に表示されるサムネイルが横幅いっぱいにならない時があります。アイキャッチにはある程度のサイズの画像を使わないとそうなる事があるのでこのテーマに限った話では無いですが、一応気になったので覚え書きとして挙げておきました。

カテゴリーに階層がある場合の注意

階層構造のカテゴリーで子カテゴリーにチェックを入れて親カテゴリーにはチェックを入れていない場合…と言うか、巧く説明出来てないかもしれませんが要はこんな感じです。

親カテゴリー
 ├ 子カテゴリー1
 └ 子カテゴリー2

Sentry カテゴリーの階層がある場合に注意

このような場合、親カテゴリーのサムネイルに子カテゴリー1と子カテゴリー2の中から最新記事のアイキャッチが表示されますが、件数にはカウントされないので表示上は0件になるようです。もちろん親カテゴリーを開けば一覧には子カテゴリー1と子カテゴリー2の記事が表示されるので動作的にはおかしくありません。

また、当然そうなるのが正しい結果だと思いますが、複数カテゴリを跨いだ場合は全てのカテゴリーに同じサムネイルが並ぶ事になりますので、Sentryを利用する場合は基本的に1記事1カテゴリーにするか、階層を持つカテゴリーは親カテゴリー・子カテゴリーの両方にチェックを入れるようにした方が良いかもしれません。

このカテゴリーの扱いって本当に難しいんですよね…私もサイトのリニューアルの為にカテゴリーとタグの使い方を全面的に見直しているところですが、まだコレといった結論に至っておりません。もうしばらくは悩むことになりそうです。

SEO的な面で少々弱い気もしてみたり

たぶんそんな事は無いんでしょうが、普段SEOに強いと言われているテーマばかり使ってるせいかそんな気がしてしまいます。FacebookのOGPやツイッターカードが欲しい場合はプラグインを使用するかカスタマイズが必要になるでしょう。

私は何とかの一つ覚えというやつで試しにVK All in One Expansion Unitをインストールしてみました。もちろんバッティングしそうな機能は無効化してあります。このプラグインについてはこちらのエントリーが参考になるかもしれませんし、ならないかもしれません。

それ以外はまたの機会に

あとはサイトの表示速度に関して少々思うところはありますが、ここで数行つらつらと書いて終わるような感じではなさそうですので、またSentryについて書く機会があればその時にでもしたいと思います。

Sentryのカスタマイズ

それではぼちぼちSentryのカスタマイズに入りたいと思います。カスタマイズと言ってもそれほど大した事は出来ませんので、期待ハズレでも怒らないで下さいね?

カルーセルスライダーを非表示に

一応このテーマのウリの部分でもある(と私が思ってるだけかも)カルーセルスライダーですが、中には要らないという方もいるかもしれません。ですが、カスタマイザーからちゃちゃっとオフにするという事は出来ませんので、スライダーを表示している部分を削除するかコメントアウトする事になります。

確か前回のエントリーでこんな事を書いてたと思いますが

大抵のカスタマイズなら親テーマからファイルを持ってこなくても子テーマ内だけで何とか出来るでしょう。

すまん、ありゃウソだった…

カルーセルスライダーは子テーマだけでは何とも出来ませんでした。どのファイルで表示しているかというと、親テーマにある se-hero.php というファイルになります。

se-hero.php を開いてみると内容はいたってシンプルです。

<!-- ピックアップ記事(カルーセル) -->
<?php get_template_part( 'sentry-top/sticky-posts' ); ?>

今後このSentryというテーマがどのくらいの頻度で更新されるようになるかわかりませんが、少なくとも現状このファイルはカルーセルスライダーの呼び出し専用ファイルと言っても良さそうなので、滅多に変更が入る事は無いだろう…というわけで親テーマからコピってくる事にしました。

また、このファイルを使ってスライダーの上下にウィジェットを表示させる為の枠を追加する事も出来ますので、ついでにヘッダー画像を設定出来るウィジェットも追加してみる事にしました。その方法についてはもう少し後で説明します。

まずはカルーセルスライダーの非表示からいきましょう。get_template_partの前に「//」を入れてコメントアウトします。

<!-- ピックアップ記事(カルーセル) -->
<?php //get_template_part( 'sentry-top/sticky-posts' ); ?>

これでOKです、簡単ですね!

Sentry カルーセルスライダーを非表示

ただまぁ、見ての通り寂しくなりますけどね?

フロントページの表示順を変更する

この作業に必要なファイルは最初から子テーマに入っています。se-home.php というファイルがそれです。

<!-- 人気記事 -->
<?php get_template_part( 'sentry-top/wpp' ); ?>

<!-- 最新記事 -->
<?php get_template_part( 'sentry-top/new-posts' ); ?>

<!-- カテゴリー -->
<?php get_template_part( 'sentry-top/categories' ); ?>

好きなように順番を入れ替えるだけ、これも簡単ですね!このファイルでも非表示にしたいセクションがあれば、先ほどと同様にget_template_partの前に「//」を入れてコメントアウトすればOKです。

フロントページにウィジェットを追加

先ほど書いたスライダーの上に表示するウィジェットと、フロントページの一番上と人気記事・最新記事・カテゴリーの間にそれぞれ入るウィジェット用の表示エリアを作成してみたいと思います。

これは例によってあまり触りたくないファイル functions.php で作成します。いつも言っていますがこのファイルを編集する時は細心の注意を払って下さいね?

// ウィジェット表示エリアを追加
if (function_exists('register_sidebar')) {

    register_sidebar( array(
        'id' => 'header-image',
        'name' => 'ヘッダー画像用ウィジェット',
        'description' => 'カルーセルスライダーの上に表示されるヘッダー画像用のウィジェットです。',
        'before_widget' => '<section class="header-image">',
        'after_widget' => '</section>',
        'before_title' => '',
        'after_title' => ''
    ) );

    register_sidebar( array(
        'id' => 'front-top',
        'name' => 'フロントページ トップ用ウィジェット',
        'description' => 'フロントページのトップに表示されるウィジェットです。',
        'before_widget' => '<section class="front-top">',
        'after_widget' => '</section>',
        'before_title' => '<h1>',
        'after_title' => '</h1>'
    ) );

    register_sidebar( array(
        'id' => 'front-middle',
        'name' => 'フロントページ ミドル用ウィジェット',
        'description' => 'フロントページのミドルに表示されるウィジェットです。',
        'before_widget' => '<section class="front-middle">',
        'after_widget' => '</section>',
        'before_title' => '<h1>',
        'after_title' => '</h1>'
    ) );

    register_sidebar( array(
        'id' => 'front-bottom',
        'name' => 'フロントページ ボトム用ウィジェット',
        'description' => 'フロントページのボトムに表示されるウィジェットです。',
        'before_widget' => '<section class="front-bottom">',
        'after_widget' => '</section>',
        'before_title' => '<h1>',
        'after_title' => '</h1>'
    ) );

}

タグに関してはこのテーマの他の要素と違和感なく馴染むようにしてみたつもりですが、この辺りは好きなように変えていただいて結構です。ここではまだ表示用の枠を作っただけですので、ここに設定された内容を表示させてやる必要があります。

スライダーの上にウィジェットエリアを追加

先ほどスライダーを非表示にする時に編集した se-hero.php に記述します。ここではスライダーを非表示にせず両方使うものとしてあります。

<!-- ヘッダー画像用 ウィジェット -->
<?php dynamic_sidebar( 'header-image' ); ?>

<!-- ピックアップ記事(カルーセル) -->
<?php get_template_part( 'sentry-top/sticky-posts' ); ?>

こんな感じでスライダーの上にヘッダー画像用ウィジェットの部分を追記します。

Sentry ヘッダー画像用ウィジェット

このウィジェットにテキスト(PCのみ)を使って画像を貼ればモバイルでは表示されませんし、モバイルでは違う画像を表示したい場合は、テキスト(モバイルのみ)も使って画像を貼っておくとそれぞれに違うヘッダー画像を表示させる事が出来ます。

Sentry スライダーの上にヘッダー画像を表示

表示するサイズはCSSで後から何とかしようとせず、画像そのもののサイズで調整した方が良いかと思います。失敗するとヘッダー画像にスライダーがめり込む事もありますので。

と言うか私はやりました…

フロントページ用のウィジェットエリアを追加

次にフロントページ用のウィジェットですが、先ほどフロントページの表示順を入れ替える時に編集した se-home.php の中にそれぞれ追記します。

<!-- フロントページトップ用 ウィジェット -->
<?php dynamic_sidebar( 'front-top' ); ?>

<!-- 人気記事 -->
<?php get_template_part( 'sentry-top/wpp' ); ?>

<!-- フロントページミドル用 ウィジェット -->
<?php dynamic_sidebar( 'front-middle' ); ?>

<!-- 最新記事 -->
<?php get_template_part( 'sentry-top/new-posts' ); ?>

<!-- フロントページボトム用 ウィジェット -->
<?php dynamic_sidebar( 'front-bottom' ); ?>

<!-- カテゴリー -->
<?php get_template_part( 'sentry-top/categories' ); ?>

フロントページトップ・ミドル・ボトム用をそれぞれのセクションと交互になるように追加してみました。このウィジェットは要らないと思えばあえて追加する必要はありませんし、更に一番下にも追加したい場合は、もう1つ枠を作ってカテゴリーの下に追記すればOKです。

Sentry フロントページにウィジェットを追加

セクションの合間に広告を挟んでみたり、CTA(Call To Actionとかいうアレです)的な何かを挿入してみたり、アイデア次第で使い道はそれなりにあるかと思います。

細かい調整はCSSでしましょう

追加したセクションのマージンなどは好きなように調整しましょう、という感じで今回は丸投げしてしまいますが、一応それぞれにクラスセレクタをつけてあるので何とかなるのではないかと思います、たぶん。

今回のカスタマイズは以上になります

実際にこのテーマを使うようになれば、使っている内にまた色々と出てくるでしょうけど、今のところはこんな感じで良いのではないかと思っています。特別な拘りが無い限りカスタマイズ無しでも十分すばらなテーマだと思いますので、これ以上は本当に趣味のレベルと言っても良いかもしれません。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る