初心者向けSTINGER8カスタマイズ 人気記事と新着記事の表示編

STINGER8 ロゴ 以前こちらのエントリーでSTINGER8のカスタマイズについて少し書いてみましたが

それ以降も時間を作ってちまちまとイジってみてはいるものの、やっぱアレですねー。本当に初心者にはお薦めしにくいテーマになってしまったと思わずにはいられません。

phpのカスタマイズ入門としては構造もわかりやすくて最適だとは思うんですけど。 とは言え、いつまでもそんな事を嘆いていても仕方がありませんので、気を取り直して今回のカスタマイズにいってみたいと思います。

スポンサーリンク

今回のカスタマイズ内容

さて、今回のカスタマイズはざっとこんな感じです。

  • トップページのサイドバーには新着記事を表示しない
  • 新着記事に見出しをつける、あと抜粋も表示
  • トップページに人気記事を表示
  • 人気記事のスタイルは新着記事と同じに

以上です。 文章で書くと非常にあっさりしていますが、やってみるとそこまであっさりとは終わらないので安心して下さい、むしろもっさりという感じです。自分で書いてて意味がわかりませんがあまり気にしないで下さい、勢いだけで書いてる部分もそれなりにありますので。

初心者向けという事で比較的簡単な内容にしてみましたが、それでも親テーマからphpファイルをコピーしてきて修正したり、修正したphpファイルをサーバーにアップロードする必要があるので、FTPクライアントかレンタルサーバーのファイルマネージャーが使える事が前提になります。FTPの使い方をちゃんと記事にしようと思いつつまだ書いていませんので、そこら辺の手順は適当にググるかして頑張っていただきたいと思います。

トップページの新着記事を非表示に

STINGER8は常にサイドバーに新着記事が表示される仕様になっているので、これをトップページには表示しないようにします。なぜそれが嫌かと言うとメインとサイドバーに同じ内容が並んでしまうからですね?

sidebar.phpの編集

それではまずsidebar.phpを親テーマの中からどんな方法でも構わないのでコピってきましょう。それが終わったらテキストエディタで開いて以下の部分を探して下さい。

<?php get_template_part( 'newpost' ); //最近のエントリ ?>

該当箇所が見つかったら以下のように修正します。

<?php if ( !is_home() ) : ?>
    <?php get_template_part( 'newpost' ); //最近のエントリ ?>
<?php endif; ?>

無条件で表示していた部分に条件をつけただけなので、1行目と3行目を追加して元々あった行を挟んだ感じになります。 今回はis_homeという条件分岐を使いましたが、これと似たものにis_front_pageというのもあります。ついでにその違いを簡単に説明してみますと。

設定 > 表示設定 > フロントページの表示

設定 > 表示設定 > フロントページの表示

  • 最新の投稿になっている場合はどちらも有効
  • 固定ページの場合、フロントページに設定した方はis_front_pageが有効
  • 固定ページの場合、投稿ページに設定した方はis_homeが有効

という事で、固定ページをフロントページに設定した場合は新着一覧を表示してもOKなので、今回はis_homeじゃない場合に新着記事を表示するという条件設定にしてあります。

新着記事のカスタマイズ

新着記事には見出しの部分が無いので表示させたいと思いますが、これはウィジェットでなくテーマの機能として内部的に表示している部分なのでphpのカスタマイズが必要になります。

newpost.phpの編集

sidebar.phpと同様に親テーマの中からnewpost.phpをコピーしてきましょう。

新着記事の見出しを追加

newpost.phpの先頭の方に以下の行を追加します。

<p class="menu_underh2">新着記事</p>

他のウィジェット見出しと同じクラスを指定しておいたので、後からまとめてcssでカスタマイズ出来るようになります。

<?php
/**
 * サイドバーの新着一覧
 */
?>
<p class="menu_underh2">新着記事</p>
<div class="kanren">
    <?php
    $newentrypost_no = 5; //表示したい記事数
    $args = array(
        'posts_per_page' => $newentrypost_no,
    );
    $st_query = new WP_Query( $args );
    ?>

こんな感じになるように行を追加してみて下さい。 なんだかウマくソースが表示出来ないと言うか左に寄っちゃうし、もうちょっと良い感じに表示出来るsyntax highlighter入れようかなぁ…でもアレ入れると重くなるって言うし…悩ましいところです。

※原因がわかったので修正しました。"<"のような文字をエンコードとかエスケープとか言う変換をしてなかったという何ともしょっぱいミスだったようで…

新着記事の表示件数を変更する場合

表示数を変更したい場合はこちらも修正しましょう。デフォルトでは5が設定されているので好きな数字に変更して下さい。まぁ多くても10くらいかな?とは思いますけど。

$newentrypost_no = 5; //表示したい記事数

新着記事に抜粋を表示したい場合

抜粋の部分はコメントアウトされているだけなので、表示したい場合はこのコメントを外せばOKです。このような状況を想定して簡単に修正出来るようにしておいてくれたんでしょうか?

<?php //the_excerpt(); //抜粋文 ?>

the_excerpt()の前の//を削除するだけです。

<?php the_excerpt(); //抜粋文 ?>

ただ、抜粋の文字数がデフォルトでは110文字と多過ぎるので、WP Multibyte Patchのexcerpt_mblengthを編集して対応しようと思っていたんですが、そこをイジっても何ともならなかったのでその問題はとりあえず保留という事にしておいて下さい。 私自身もまだまだ初心者ゆえにわからない事だらけなんですよね、これが。

人気記事を表示しよう

これはもうプラグイン使っちゃいます。WordPress Pupular Postというおなじみのプラグインです。プラグイン > 新規追加でプラグイン名をコピペして検索に出てきたらサクっとインストールしちゃって下さい。

WordPress Popular Post カウント設定

有効化したらまずは自分をカウントしないよう設定しておいた方が良いと思います。設定 > WordPress Popular Posts > Toolsタブを開いて少し下にスクロールして下さい。1画面分ほど下に行くと画像のような項目が見つかるかと思います。このLog views fromをEveryone(全員)からVisitors only(訪問者のみ)に変更したらApplyをクリックしてセーブしておきましょう。

とは言っても、いきなりこれをやっちゃうと誰かが実際に記事を開いてくれるまでは一切カウントされなくなるので、表示確認のテストに使う分だけは自分で表示しておいてからの方がいいかもしれません。だったらそれを先に言えって感じですね、すいません。

このプラグインは最初から日本語だったという方や日本語化パッチを当てている方もいたりして正直よくわかりませんが、私は面倒なのでそのまま英語で使っています。とりあえず理解出来ないような難しい単語は出てきませんしこのままでも特に不都合は無いかと思います。

ウィジェットの配置と設定

次に人気記事のウィジェットを設置してみましょう。全ての項目を説明していると非常に長くなるのでポイントを絞って説明したいと思います。表示に関してはデフォルトだと見映えが悪いので、新着記事と同じスタイルを適用する方向でいきます。 それでは利用できるウィジェットの中からWordPress Popular Postをクリックして表示したい位置に追加してみましょう。

Title

好きな名前にしていただいて結構ですがここでは人気記事としておきます。新着記事とセットで考えた時にバランスがおかしくない名前にしておいた方が良いでしょう。

Show up to

表示したい記事数を設定します。

Post type

一般的には固定記事は含まないと思うので、postだけで良いかと。

上記以外の項目

以下のチェックボックにチェックを入れたら一度セーブして下さい。

Posts settings
  • Shorten title
  • Display post excerpt
  • Display post thumbnail
Stats Tag settings
  • Display date
HTML Markup settings
  • Use custom HTML Markup

各項目の設定

一度セーブした事で先ほどチェックした項目が編集可能な状態になったので、もう一度順番に設定項目を見ていきましょう。

Posts settings
  • Shorten title Shorten title to 50くらいかな?
  • Display post excerpt Excerpt length ここは適当で
  • Display post thumbnail Set size manually width・heightとも100で
Stats Tag settings
  • Display date Date Format Y/m/dが無難でしょうか
HTML Markup settings
  • Use custom HTML Markup
  • Before / after title 左右とも空欄
  • Before / after Popular Posts
    左側 <div class="kanren"> 右側 </div>
  • Post HTML Markup 以下を参照
<dl class="clearfix">
    <dt>{thumb}</dt>
    <dd>
        <div class="blog_info"><p>{date}</p></div>
        <p class="kanren-t">{title}</p>
        <div class="smanone2"><p>{excerpt}</p></div>
    </dd>
</dl>

単純に新着記事のスタイルをそのまんま当てはめてみただけですが、設定画面がだいたいこんな感じになっていればOKではないかと思います。

WordPress Popular Post Markup 設定画面

実は一点だけどうしてもわからない事がありまして。この"smanone2"というクラスが何なのかさっぱりわからないんですね…STINGER PLUS+でもあった気がするんですが。

"smanone"だったらスマホでは、と言うか960px未満の時に非表示にする為のものだというのはわかってるんですよ。でもこの"smanone2"はどこにもそれらしい記述が見当たりません。単に私の探し方が悪いのか、それとも更にメディアクエリを細かく使い分ける予定で忘れられたのか…謎です。どなたかご存知無いですかね?

何れにしても"smanone2"では何も効果が無いようなので、もしスマホからのアクセス時に抜粋を表示したくないという場合は"smanone"に変更した方が良いかもしれません。新着記事の方はnewpost.phpの該当箇所を修正する事になります。

トップ画面の人気記事を表示

これもプラグインに頼る事にします。Display Widgetsというプラグインをインストールしちゃって下さい。

ただ、このプラグインは直近の更新が1年前というのがちょっと気になるのと、ほぼ同じ機能のDisplay Widgets SEO Plusというプラグインがその後継にあたるような感じなのでちょっと迷うところなんですが、とりあえず今はDisplay Widgetsの方を使う事にしてみます。 このプラグインはウィジェットの表示を簡単に制御出来て使い勝手も良いので、インストールしておくと何かと役に立つ事もあるかと思います。

有効化が済んだら先ほど人気記事を設定したウィジェットをもう一度開いてみて下さい。WordPress Popular Postの設定の下に、更に設定項目が追加されているはずです。

Display Widget 設定画面

プルダウンメニューから「チェックしたページで表示」を選択してフロントにチェックを入れて保存します。ただ、この設定だと当エントリーの序盤でお話しした「is_homeとis_front_page」の例と同じように、トップを固定ページにした場合に表示結果が変わってくる可能性があるので、その場合は設定した固定ページに合わせて条件を変更する必要があるという事を覚えておいて下さい。

ウィジェット見出しの変更について

WordPress 4.7から追加になったような気がするカスタマイザーの追加CSSですが、テーマの編集にあるcssと違ってプレビューしながら修正出来るのは便利ですね。なので、まずはここでアレコレとイジってみて、これでOKという状態になったらテーマの編集に持って行ってstyle.cssに書き出すようにするといいかもしれません。

カスタマイザー 追加css 編集画面

とりあえず、簡単なウィジェット見出し変更用のサンプルを置いておきますので、セレクタはそのままでデザインは好きなようにカスタマイズしていただければと思います。

#side .st-aside .menu_underh2 {
    margin-top: 10px;
    padding: 10px;
    font-size: 16px;
    border-left: 5px solid #3f3f3f;
}

一応.menu_underh2だけでも効きますがフォントに関する指定があると無効になったりしますので、このまま使っちゃった方が良いかもしれません。

今回のカスタマイズは以上です

自分でやるとそれほど大した作業では無いと思っても、こうして文章にしてみるとある程度端折ったとは言えやはりこのくらいの長さになってしまいますねぇ。それなりに苦労はしましたが、こんな記事でもお役に立ててもらえれば幸いです。

それではまた。

スポンサーリンク

コメント

  1. […] 参考にさせていただいたサイト: 初心者向けのSTINGER8カスタマイズ 人気記事と新着記事の表示 […]

トップへ戻る