[WP]WordPressテンプレートカスタマイズ用小技メモ(2)

テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その1はこちら
今回はテクニカルなものが多いかもしれない。

グローバルメニュー的なもの

ページとかカテゴリー単体にリンクしたい場合には、get_category_link()及びget_permalink()を使う。
引数はそれぞれカテゴリーIDとページIDです。

<ul id="glovalnavi">
	<li><a href="<?php echo get_option('home'); ?>" rel="index" title="<?php _e('Go to site top.'); ?>">HOME</a></li>
	<li><a href="<?php echo get_category_link(1);?> " rel="category" title="<?php _e('View all posts in Event information.'); ?>">イベント情報</a></li>
	<li><a href="<?php echo get_permalink(1); ?> " rel="page" title="<?php _e('Sample Page.'); ?>">ページ</a></li>	
</ul>

パンくずリンクぽいもの

single.phpとかにHOMEとカテゴリと記事タイトルのリンクを出すだけで作れます。
ループ内に以下のソースを入れる。

<p><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a> &gt; <?php the_category(' | ') ?> &gt; <span><?php the_title(); ?></span></p>

もっと実用的にタイトルと連動させるならこの記事の関数が便利だと思う。

指定したサイズでサムネイル画像を表示する

投稿記事にアップロードされた画像を取得する手法はこの記事とかこの記事で書いてるので、
応用して指定したサイズで表示出来るようにしてみます。
まず、media.php内にconstrain_dimensions()という関数があるので、
これをfunction.phpにまるっとコピペする。

次に、以下の関数をfunctions.phpに追加。

function get_postimg_thumb($postid,$max_width,$max_height) {
		$attachments = get_children(array('post_parent' => $postid, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
	if(!empty($attachments)){
		$attachment = array_shift($attachments);
		$image =  image_downsize(intval($attachment->ID));
		list($src, $current_width, $current_height) = $image;
		$size = constrain_dimensions( $current_width, $current_height, $max_width, $max_height );
		
		$hwstring = image_hwstring($size[0], $size[1]);
		return '<img src="'.attribute_escape($src).'" '.$hwstring.' /></a>';
	}else{
		return false;
	}
}

index.php等のループ内に次のように書きます。

$img = get_postimg_thumb(get_the_ID(),130,130);
if(isset($img)){print $img;}

引数に記事IDと縦横の上限を指定すると、画像タグのサイズを上限の数値に修正して出力します。
get_postimg_thumb($postID,$MaxWidth,$MaxHeight)

自動でストライプに

記事IDやコメントIDを2で割って余剰で判定。

$class = ($comment->ID % 2) ? 'odd' : 'even';
print "<div class=\"$class\">";

検索結果から特定のカテゴリと記事の除外

search.phpもしくはis_search()以下のループ前に、query_postsでcategory__not_inとpost__not_inを使用する。
指定はIDで、複数指定する場合は配列形式になります

query_posts(array('category__not_in' => array(1,2),'post__not_in' => array(1,2,3)));
if (have_posts()) :

タグのセレクトメニュー化

single.phpとか

<form method="get"><p>
<?php
print "<select name=\"tag\">";
$posttags = get_the_tags();
if ($posttags) {
	foreach($posttags as $tag) {
		print "<option value=\"".$tag->slug."\">".$tag->name."</option>";
	}
}
print "</select>";
?><input type="submit" value="GO" /></p></form>

カテゴリータイトルを画像にする

カテゴリーごとにタイトル画像作るとif文が延々続いたりするので、その手間を省くためのサンプルです。

まずカテゴリーのタイトル画像を作成する。
サイズは固定で、ファイルの名前をカテゴリーIDを含む連番にします。たとえば「category_title-15.jpg」など

function.phpに以下をコピペ。

function getCategoryTitleImg(){
	global $wp_query;
	$imgusecat =array('17','15','20');//タイトル画像表示するカテゴリID
	$getcategory = $wp_query->get_queried_object();
	if(array_search($getcategory->cat_ID,$imgusecat)!==false){
		return "category_title-".$getcategory->cat_ID.".jpg";
	}else{
		return false;
	}
}

この関数では画像のURLだけ返します。
$imgusecatの配列内に、タイトル画像を表示したいカテゴリIDを突っ込んでおく。

テンプレートファイルの画像表示したいところに、次のように書く。(ループ外)

<?php $imgsrc = getCategoryTitleImg();
if($imgsrc!==false):?>
<h1 class="category-title"><img src="<?php bloginfo("template_directory")?>/images/<?php print $imgsrc; ?>" width="500" height="100" alt="<?php single_cat_title(); ?>" /></h1>
<?php else: ?>
<h1 class="category-title"><?php single_cat_title(); ?></h1>
<?php endif; ?>

GalleryのCSSを削除する

WordPressのショートコードで表示できるGalleryのCSSは何故かbodyに入るので、これを追加させずにテーマのCSSで書くようにするソース。

function gallery_removecss($css){
	return '<div class=\'gallery\'>';
}
add_filter('gallery_style', 'gallery_removecss');

headに移動させるなら以下を追加。

function gallery_addcss(){
	echo '<style type=\'text/css\'>
			.gallery {
				margin: auto;
			}
			.gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: 33%;
			}
			.gallery img {
				border: 2px solid #cfcfcf;
			}
			.gallery-caption {
				margin-left: 0;
			}
		</style>';
}
add_action('wp_head','gallery_addcss');

linkタグにして外部CSS化しても良い。

今更感漂うおまけ

XML宣言

PHPで先頭に入れるとエラーになるので、echoやprintを使う必要があります。

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'."n"?>

IE用のif文

bloginfo(‘template_directory’);で、アクティブなテーマのディレクトリまでのパスが出力されるので、それ使うだけ。

<!--&#91;if IE&#93;>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/iefilter.css" />
<!&#91;endif&#93;-->

「[WP]WordPressテンプレートカスタマイズ用小技メモ(2)」への4件のフィードバック

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください