【Xeoryカスタマイズ】人気記事にサムネイルを設定する2つの方法①

wordpress-xeory

こんにちは。今回はWordPressの無料テーマ『Xeory』のウィジェットにある人気記事にサムネイルを設定する方法を説明します。

「Xeoryってどんなテーマなの?」って人はこちらの記事を見てください。

»最強の無料WordPressテーマXeoryを使おう!

 

Xeoryの人気記事をサムネイル付きで表示する方法は大きく分けて2つあります。

それはプラグインを使う方法XeoryのPHPに追記する方法です。今回は、『XeoryのPHPに追記する方法』を説明していきたいと思います。

 

XeoryのPHPに追記して人気記事にサムネイルを表示する方法

まずはサムネイルの表示をしない場合の人気記事の表示方法を説明します。

 

Xeoryにはプラグインを使わなくても最初から人気記事を表示させることが出来ます。便利ですね!

 

人気記事の表示方法

まず『ページビュー数』ウィジェットをサイドバーに入れます。

wordpress-xeory01

ページビュー数のタイトル右横の『▼』をクリックして詳細設定を開きます。

wordpress-xeory02

設定をします。設定方法は画像通りにやっていただければ大丈夫かと思います。

設定をしたら忘れずに『保存』をクリックしましょう。

wordpress-xeory03

これで人気記事を表示することが出来ました!次は、サムネイルを表示をする設定をします。

 

 

postviews.php に追記をする

実は、Xeoryのテーマ内にあるpostviews.phpに少しだけ追記をするだけでサムネイルを表示させることが出来ます。

 

まず、postviews.php を開きましょう。postviews.php は『xeory_base/lib/functions/postviews.php』にあります。

 

最初に247行目に追記をします。

 

$post_excerpt = bzb_views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars);

これを…

$post_excerpt = bzb_views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars);
$thumbnail = get_the_post_thumbnail($post->ID,array(●,●,true));

このようにします。●のところには表示したいサムネイルの大きさを入力しましょう。(今回は●に68を入力)
例:表示したいサムネイルサイズがwidth:100px height:50pxの場合
»$thumbnail = get_the_post_thumbnail($post->ID,array(100,50,true));

 

そして、251行目の追記します。

$temp = '<li><a href="%POST_URL%"  title="%POST_TITLE%" >%POST_TITLE%</a></li>';

 

$temp = '<li><a href="%POST_URL%"  title="%POST_TITLE%" ><div class="view-thumbnail">%THUMBNAIL%</div><div class="view-title">%POST_TITLE%</div></a></li>';

としました。※ここはあくまで私の設定です。自分が表示したいデザインに合わせて追記しましょう。

 

 

最後に259行目の下に追記します。

$temp = str_replace("%POST_URL%", get_permalink($post), $temp);
$temp = str_replace("%THUMBNAIL%", $thumbnail, $temp);

 

wordpress-xeory

これで人気記事にサムネイルを表示させることが出来ました!

 

ついでに僕の追記したcssもご紹介します。

 

おまけ CSSに追記

僕は以下のように追記しました。

.widget_views a {
color: #5E6265;
text-decoration: none;
display: block;
}

.view-thumbnail {
float: left;
}

.view-title {
display: block;
margin-left: 78px;
min-height: 68px;
}

※あくまで私の設定です。

 

まとめ

今回は、Xeoryで人気記事にサムネイルを表示する方法をご紹介しました…が、よく考えてみましょう。

『なぜ最初からXeoryがサムネイルを表示する設定になっていないのか』ということです。

 

それは、必ずしも人気記事にサムネイルを表示することが良い事だけではないからです。ですので、自分のサイトに合った表示方法を選択するといいでしょう。

 

…本当は1つの記事で人気記事にサムネイルを表示する方法を全て説明したかったのですが、記事が長くなりすぎてしまったため次の記事でプラグインを使った人気記事にサムネイルを表示する方法を説明したいと思います。

 

 

おわり

expand_less