今回は、僕も愛用しているWordPressのテーマ賢威のカスタムです。

とにかく売れまくっている超人気テーマですが、カスタムしてナンボなところがあるテーマです。

そんな賢威のカスタム、今回はトップページの記事一覧項目のカスタムについて解説します。

 

 

 

 

スポンサーリンク

SNSと投稿連携された際のジレンマを解消したくて

独自ドメインを使ったWordPressブログって、最初とても弱いんです。

アドレスが認知されていませんから、アクセスを集めるのが大変なんですよね。

 

そんな時は、SNSからアクセスをもってくるというやり方は鉄板です。

 

ただ、アクセスのキッカケとなるアイキャッチ画像の設定で実はちょっとしたジレンマがありました。

 

facebookで一番大きく表示させるアイキャッチ画像は1200×630です。

keni01

この表示が一番訴求力がありますよね。

パッと目に入るので、アイキャッチ画像さえ工夫してしまえばfacebookからのアクセスも期待できます。

 

 賢威のディフォルト設定は、246×200です。

成程・・・では・・・という事でfacebookのアイキャッチ画像の1200×630に合わせて画像作成を行うと

実はブログ上では下図の様な問題が発生してしまいます。

keni02

この様にアイキャッチ画像が寸法に合わずに切れてしまうんですよね。

気にしない方もいらっしゃると思いますが、僕はものすごく気になります。

折角ならブログ上でもちゃんとアイキャッチ画像を表示させたいんです。

 

と、言う訳でカスタムしてみました。

 

記事一覧のカスタムを行う方法 画像サイズ

では、早速カスタムしてゆきます。

 

①【テーマのための関数(function.php)】の変更

まずは、【テーマのための関数(function.php)】をカスタムします。

ここをカスタムすると、アイキャッチ画像のサイズを変更することが出来ます。

ダッシュボード⇒外観⇒テーマの編集⇒テーマのための関数(function.php)

この順番で編集画面を表示させます。

 

表示される編集画面で下記の文字列がありますので、まずは見つけてください。

add_theme_support('menus');add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 246, 200, true );add_image_size( 'small_thumbnail', 60, 60, true );

この文字列のすぐ下に、以下のコードを追記してください。

add_image_size( 'eyecatch', 横サイズ, 縦サイズ, true );

この、横サイズと縦サイズにアイキャッチのサイズを指定しますが
1200×630の比率に合わせて設定すと切れることなく表示させられます。

このブログの場合は、600×315に設定しています。

 

②【メインインデックスのテンプレート(index.php)】の変更

次に、【メインインデックスのテンプレート(index.php)】の変更を行います。

ここをカスタムすると、①の設定が反映され、レイアウトの調整が出来ます。

ダッシュボード⇒外観⇒テーマの編集⇒メインインデックスのテンプレート(index.php)

この順番で編集画面を表示させます。

 

表示される編集画面で下記の文字列がありますので、まずは見つけてください。

<!--アイキャッチ画像--><?php if(has_post_thumbnail()){ ?><div class="left"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo the_post_thumbnail(); ?></a></div><?php } ?><!--/アイキャッチ画像-->

この文字列の4行目を以下のコードに書き換えてください。

<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo the_post_thumbnail(eyecatch); ?></a>

*thumbnail()のカッコ内にeyecatchと入力すればOKです。

 

これで、①で指定したアイキャッチ画像のサイズが記事一覧で反映されます。

 

記事一覧のカスタムを行う方法 レイアウト変更

画像のサイズの調整以外にレイアウトを変えたいこともあると思います。

このブログの様に画像のサイズが大きいと、レイアウトがおかしなことになってしまいます。

keni03

説明文がアイキャッチ画像のスペースに入っちゃいました。

これではみにくいので、レイアウトを変えちゃいましょう。

 

①配置を変えてしまう

1つ目は文字が入り込まないように配置を変えちゃいましょう。

 

<!--アイキャッチ画像--><?php if(has_post_thumbnail()){ ?><div class="left"><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php echo the_post_thumbnail(eyecatch); ?></a></div><?php } ?><!--/アイキャッチ画像-->

この文字列の3行目と5行目を変えちゃいましょう。

<div class="left">
</div>

ここですね。
この2つを消すと、文字が入り込まなくなります。

因みに、leftの部分でアイキャッチ画像の表示位置をしていできますので

右に表示させたい場合はrightと入力すればOKです。

 

②解説分(ブログの冒頭表示)をなくしてしまう

2つ目は、アイキャッチ画像だけで十分なので解説文(ブログの冒頭分表示)をさせなくする方法です。
アイキャッチ画像の設定をした文字列のすぐ下に以下の文字列があります。

<!--本文抜粋--><?php the_excerpt(); ?><p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p><!--/本文抜粋-->
<?php the_excerpt(); ?>

この中の2列目の文字列を消すと解説文(ブログの冒頭分表示)が表示されなくなります。

 

③記事名の続きを読むリンク文言の変更

最後に、先ほどの文字列の3行目の部分で以下のことが出来ます。

  • 記事名の続きを読むの文言の変更

⇒ 【の続きを読む】という文言を変えるだけです。

  • リンク前のアイコンの変更

⇒ <p class=”link-next”>の部分を変更すればOKです。もしリンクを画像に変えてしまいたい場合は

 

<p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p>

これを

<a href="<?php the_permalink() ?>"><img src="画像のURL"></a>

この様にすることにより、ボタンに差し替えることもできます。

 

賢威はSEOに強いだけではなく、このようにさまざまなカスタムに対応していますので

オウンドメディア構築はもってこいのテーマです。

SEOに強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ!


【賢威】

鉄板テーマです。
カスタム性・SEO対策抜群でダントツで人気のテーマです!
初心者でも導入しやすく、テンプレートも豊富なのでこれ一つで長く使うことが出来ます!

 

 

 

manual