WordPress 投稿記事の最初の画像のサムネイルを取得する

Filed under: functions.php,wordpress — kdcs @ 17年12月12日 火曜日

※以前の記述では記事投稿時にアップロードした1番目の画像が取得されるため、
その画像を記事内で使用しなくても「最初の画像」と認識されてしまう。

こちらは記事内に張り付けてある最初の画像を取得する方法

function.phpに以下を記述

//投稿記事の最初の画像のサムネイル -------------------------------------------------------
function my_first_image_thumb(){
  global $post;
  $img_url = '';
  //デフォルト画像の設定
  $defaute_url = get_stylesheet_directory_uri(). '/images/default.png';

  //最初の画像を取得してIDを取得
  preg_match_all('/<img.+?class=".+?wp-image-(.+).*?".*?>/i', $post->post_content, $matches);
  if(isset($matches[1][0])){
    $img_id = ($matches[1][0]);
  }

  //最初の画像があれば分岐
  if(!empty($img_id)){
    //最初の画像IDからサムネイルのパスを取得してセット
    $img_url = my_wp_get_attachment_medium_url($img_id);
  } else {
    //最初の画像がない場合、デフォルト画像のパスをセット
    $img_url = $defaute_url;
  }
  return $img_url;
}

//画像IDからサムネイルサイズのパスを取得
function my_wp_get_attachment_medium_url( $id ) {
  $thumbnail_array = image_downsize( $id, 'thumbnail' );
  $thumbnail_path = $thumbnail_array[0];
  return $thumbnail_path;
}

テンプレート内に以下を記述
※リストタグで最新の記事を5件表示させる例

<ul class="sp_list">
<?php $paged = get_query_var('paged'); ?>
<?php query_posts("posts_per_page=5&paged=$paged"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class="clearfix"><a href="<?php the_permalink() ?>"><span class="listImg"><img src="<?php echo my_first_image_thumb(); ?>"></span><span class="listTitle"><?php the_title(); ?></span></a></li>
<?php endwhile; else: //記事が無い場合 ?>
<li><< イベント準備中です >></li>
<?php endif; wp_reset_query(); //クエリのリセット ?>
</ul>

WordPress記事内の最初の画像を取得し表示させる

Filed under: functions.php,wordpress — kdcs @ 17年12月10日 日曜日

WordPressで記事内の最初の画像を取得して表示させるコード
注:この記述は記事に張り付けてある画像の大きさそのままを取得します
◆function.php内に以下を記述
※コード内の「default.jpg」は記事内に画像が無い場合に表示する代替え画像

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all("/<img[^&gt;]+src=[\"'](s?https?:\/\/[\-_\.!~\*'()a-z0-9;\/\?:@&=\+\$,%#]+\.(jpg|jpeg|png|gif))[\"'][^>]+>/i", $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
if(empty($first_img)){ //Defines a default image
        $first_img = "default.jpg";
    }
    return $first_img;
}

◆テンプレート内に以下を記述

<img src="<?php echo catch_that_image(); ?>">

記事内の最初の画像を取得してサムネイルを表示させるコード
注:この記述は記事に張り付けてある画像のサムネイルを取得します
function.phpに以下を記述

/画像サイズをセット
set_post_thumbnail_size( 150, 150, true );
 
//画像URLからIDを取得
function get_attachment_id_by_url( $url ) {
  global $wpdb;
  $sql = "SELECT ID FROM {$wpdb->posts} WHERE post_name = %s";
  preg_match( '/([^\/]+?)(-e\d+)?(-\d+x\d+)?(\.\w+)?$/', $url, $matches );
  $post_name = $matches[1];
  return ( int )$wpdb->get_var( $wpdb->prepare( $sql, $post_name ) );
}
 
//画像をサムネイルで出力
function catch_that_image() {
  global $post;
  $first_img = '';
  $output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches );
  $first_img_src = $matches[1][0];
  $attachment_id = get_attachment_id_by_url( $first_img_src );
  $first_img = wp_get_attachment_image( $attachment_id, 'thumbnail', false, array( 'class' => 'archive-thumbnail' ) );
  if( empty( $first_img ) ){
    $first_img = '<img class="attachment_post_thumbnail" src="' . get_stylesheet_directory_uri() . '/images/no_image.png" alt="No image" />';
  }
  return $first_img;
}

テンプレート内に以下を記述
※アイキャッチ画像があるときはそちらを表示

<?php if( has_post_thumbnail() ): ?>
  <?php echo get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'class' => 'archive-thumbnail' ) ); ?> 
<?php else: ?>
  <?php echo catch_that_image(); ?>
<?php endif; ?>

投稿数をアンカータグ内に入れる(カテゴリー一覧などリスト表示するとこ)

Filed under: functions.php,wordpress — kdcs @ 17年12月9日 土曜日

投稿数をアンカータグ内に入れる方法

テンプレート内に記述する方法(ulリストタグを吐き出し、フォントアイコンを使う)

<ul>
<?php
$args=array(
  'orderby' => 'name',
  'order' => 'ASC'
  );
$categories=get_categories($args);
  foreach($categories as $category) { 
    echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="'.$category->name.'" ' . '>'.'<i class="fa icon-search"></i>' . $category->name.' ('.$category->count.')'.'</a> </li> ';
 }
?>
</ul>

(続きを読む…)

WordPress 本文抜粋110文字まで表示「the_excerpt()」

Filed under: functions.php,wordpress — kdcs @ 17年12月8日 金曜日

WordPressで本文抜粋110文字まで表示できるタグ

<?php the_excerpt(); ?>

基本は英数字55単語となっているようで、日本語110文字に対応させるには「WP Multibyte Patch」プラグインを有効にする必要があります。

このテンプレートタグを使用した場合、記事本文の110文字の後に[…]が表示されます。
このタグを使うとpタグで囲まれるのでpタグを外すには以下のコードを使う

<?php echo get_the_excerpt(); ?>

◆表示文字数を変える(function.phpに以下を記述)

//the_excerpt() 抜粋文字数の変更 ---------------
function my_excerpt_length($length) {
	return 80;
}
add_filter('excerpt_length', 'my_excerpt_length');

◆文末の[…]を削除する方法(function.phpに以下を記述)

//the_excerpt() 抜粋の省略文字削除 -------------
function my_excerpt_more($more) {
	return '';
}
add_filter('excerpt_more', 'my_excerpt_more');

◆文末の[…]を別の文字に変更する(function.phpに以下を記述)

//the_excerpt() 抜粋の省略文字を変更 -----------
function my_excerpt_more($more) {
	return '…';
}
add_filter('excerpt_more', 'my_excerpt_more');

◆別の文字に変更して、その記事へのリンクを追加する(function.phpに以下を記述)

function my_excerpt_more($post) {
	return '<a href="'. get_permalink($post->ID) . '">' . '…続きを読む' . '</a>';
}
add_filter('excerpt_more', 'my_excerpt_more');

カスタム投稿タイプに既存のカテゴリを使う(未検証)

Filed under: functions.php,wordpress — kdcs @ 16年5月20日 金曜日

カスタム投稿タイプにカスタムタクソノミー(カテゴリ)ではなく
既存のカテゴリを使いたい場合の記述
function.php
カスタム投稿タイプは「hogehoge」

function add_category_to_hogehoge() {
register_taxonomy_for_object_type('category', 'hogehoge');
}
add_action('init', 'add_category_to_hogehoge');

サイト内検索

カテゴリー

最近の投稿

↑上に戻る