Tag: アイキャッチ画像


アップロードする画像のサイズを追加|WordPress

2016年10月14日 wordpressアイキャッチ画像画像

WordPressでは、画像をアップロードすると、
サムネイルサイズ・中サイズ・大サイズ・フルサイズが自動的にアップされます。
サイズの変更はダッシュボード>設定>メディアからできます。

毎回設定から変更するのは面倒くさい、他のサイズも使いたいという時に役に立ちます。

しかも簡単です。function.phpに以下を追加するだけ。

 

function.php

横200px、縦125pxの画像を追加する時。
【thumb_name】は自分でわかるように入れてください。

/** 好きな画像サイズを追加する
add_image_size( 'thumb_name', 200, 125, true );

表示させるときは、

テンプレートファイル

<?php the_post_thumbnail('thumb_name'); ?>

アイキャッチ画像の出力|WordPressの要領です。

アイキャッチ画像をLightboxで展開するコード|WordPress

2014年05月24日 wordpressアイキャッチ画像

rel=”lightbox”の場合

<?php $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src($thumbnail_id, 'full'); ?>
 <a href="<?php echo $image[0]; ?>" rel="lightbox">
  <?php the_post_thumbnail('thumbnail'); ?>
 </a>

アイキャッチ画像の出力|WordPress

2013年08月06日 wordpressアイキャッチ画像

 

//ダッシュボードのメディアで設定したサイズを使う場合

//サムネイル
 <?php the_post_thumbnail('thumbnail'); ?>

//中サイズ
 <?php the_post_thumbnail('medium'); ?>

//大サイズ
 <?php the_post_thumbnail('large'); ?>

//フルサイズ
<?php the_post_thumbnail('full'); ?>

 

WordPressでアイキャッチの設定

2012年12月21日 wordpressアイキャッチ画像

WordPressでは、投稿ごとにアイキャッチ画像(サムネイル)を入れることが出来ます。
まずは、function.phpに以下のコードを追加します。 

function.php

/** 投稿サムネイル画像(アイキャッチ画像)を表示 */
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

/**投稿一覧にサムネイルを表示 */
if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {

// for post and page
add_theme_support('post-thumbnails', array( 'post', 'page', 'カスタムポスト名' ) );

function fb_AddThumbColumn($cols) {

$cols['thumbnail'] = __('Thumbnail');

return $cols;
}

function fb_AddThumbValue($column_name, $post_id) {

$width = (int) 35;
$height = (int) 35;

if ( 'thumbnail' == $column_name ) {
// thumbnail of WP 2.9
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
// image from gallery
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
if ($thumbnail_id)
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
elseif ($attachments) {
foreach ( $attachments as $attachment_id => $attachment ) {
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
}
}
if ( isset($thumb) && $thumb ) {
echo $thumb;
} else {
echo __('None');
}
}
}

// for posts
add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );

// for pages
add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
}

 

アイキャッチ画像を読み込むのは、以下のコードをテンプレートファイルに追加します。

 

テンプレートファイル

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php $title= get_the_title(); the_post_thumbnail('画像サイズのID', array( 'alt' =>$title, 'title' => $title)); ?>
</a>

<?php else: // サムネイルを持っていないときの処理 ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<img src="<?php bloginfo('template_url'); ?>/img/noimg.jpg(サムネイルを持っていないときの画像)" alt=""/>
</a>
<?php endif; ?>

画像サイズのIDには以下が設定できます。

thumbnail : サムネイル
medium : 中サイズ
large : 大サイズ
full : フルサイズ