抜粋とアイキャッチを表示させる

アイキャッチ「付箋付ノートと( ..)φメモメモ」

編集方法~抜粋文記載編~

基本 抜粋を表示させたい箇所に下記一文を表示

<?php the_excerpt(); ?>

プログラムの説明

抜粋欄に記入されている場合はその項目に入力された内容を、
入力されていなかった場合は記事本文・頭から○○文字を表示させる。
※表示される文章は<p>タグで囲まれております。
○○文字・・・ワードプレスのVerや使っているプラグインによって変わってきます。そのままだと百文字越えるか越えないかなので短めかも?
※抜粋される文章が途中で切れてしまう場合は文末に[…]と表示される。

抜粋をカスタムしよう!

文字数を変更する

テーマにある「function.php」を編集します。
<?php から  ?> の間に入れるようにしましょう!
文字数は半角数字で入力☆

function my_excerpt_mblength($length) {
    return 文字数;
}
add_filter('excerpt_mblength', 'my_excerpt_mblength');

末尾の省略記号を変更する

テーマにある「function.php」を編集します。
<?php から ?> の間に入れるようにしましょう!

function my_auto_excerpt_more($more) {
    return '省略記号';
}
add_filter('excerpt_more', 'my_auto_excerpt_more');

<p></p>タグを削除する。

テーマにある「function.php」を編集します。
<?php から ?> の間に入れるようにしましょう!

remove_filter( 'the_excerpt', 'wpautop' );

編集方法~アイキャッチ記載編~

基本 アイキャッチ画像を表示させたい箇所に下記一文を表示

<?php the_post_thumbnail(); ?>

応用 アイキャッチ画像を色々設定する場合

( )の中に追記する。
一要素目は画像の大きさ、それ以降は他の要素をまとめて指定する。
画像の大きさをメディアの設定「サムネイルサイズ」に、画像は右寄せにして表示させる。

<?php the_post_thumbnail('thumbnail','align=right'); ?>

※大きさのサイズのみの設定の場合、後ろの,’○○’は省略できます。

  • thumbnail・・・サムネイル
  • medium・・・中サイズ
  • large・・・大サイズ
  • full・・・アップロードした写真そのもののサイズ

○align=rightはclass=クラス名にしてCSSで配置等のデザインを設定してやってもよい♪

応用 まとめサンプル

アイキャッチ画像が設定されていない場合、代替画像を表示させる。
大きさはサムネイル、CSSのclassは「alignleft」、
代替画像はテーマフォルダ下のimgフォルダの中にある「no-image.png」とする。

<?php
if(has_post_thumbnail()) { the_post_thumbnail('thumbnail','class=alignleft'); }
else { //代替画像
   echo '<img src="' . bloginfo('template_url') . '/img/no-image.png" width="横幅" height="高さ" class="alignleft" />';
}?>
  • このエントリーをはてなブックマークに追加

関連記事

ピックアップ記事

  1. はっちゃんのWordPressセミナー
  2. アイキャッチ「鍵とノート」

アーカイブ

ページ上部へ戻る