- 2008-11-19 (水) 17:29
- wordpress
テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その１はこちら。
今回はテクニカルなものが多いかもしれない。
グローバルメニュー的なもの
ページとかカテゴリー単体にリンクしたい場合には、get_category_link()及びget_permalink()を使う。
引数はそれぞれカテゴリーＩＤとページＩＤです。
-
<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>> <?php the_category(' | ') ?>> <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'));
-
$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等のループ内に次のように書きます。
引数に記事IDと縦横の上限を指定すると、画像タグのサイズを上限の数値に修正して出力します。
get_postimg_thumb($postID,$MaxWidth,$MaxHeight)
自動でストライプに
記事ＩＤやコメントＩＤを２で割って余剰で判定。
-
$class = ($comment->ID % 2) ? 'odd' : 'even';
-
print "<div class=\"$class\">";
検索結果から特定のカテゴリと記事の除外
search.phpもしくはis_search()以下のループ前に、query_postsでcategory__not_inとpost__not_inを使用する。
指定はＩＤで、複数指定する場合は配列形式になります
タグのセレクトメニュー化
single.phpとか
カテゴリータイトルを画像にする
カテゴリーごとにタイトル画像作るとif文が延々続いたりするので、その手間を省くためのサンプルです。
まずカテゴリーのタイトル画像を作成する。
サイズは固定で、ファイルの名前をカテゴリーIDを含む連番にします。たとえば「category_title-15.jpg」など
function.phpに以下をコピペ。
-
function getCategoryTitleImg(){
-
global $wp_query;
-
$getcategory = $wp_query->get_queried_object();
-
return "category_title-".$getcategory->cat_ID.".jpg";
-
}else{
-
return false;
-
}
-
}
この関数では画像のURLだけ返します。
$imgusecatの配列内に、タイトル画像を表示したいカテゴリＩＤを突っ込んでおく。
テンプレートファイルの画像表示したいところに、次のように書く。（ループ外）
-
<?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を使う必要があります。
IE用のif文
bloginfo('template_directory');で、アクティブなテーマのディレクトリまでのパスが出力されるので、それ使うだけ。
-
<!--[if IE]>
-
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/iefilter.css" />
-
<![endif]-->
関連記事
- Newer: [WP]TinyMCEのビジュアルリッチエディタにカスタムボタンを追加する
- Older: [XHTML]WebサイトのOOP
