カテゴリー
WPカスタマイズ備忘録

子テーマでテンプレートURLが正しく指定できなかったとき

子テーマにいつも通りのタグを使ったら親テーマのテンプレートURLが吐き出されて困ってる、時のメモです。

親テーマでは、header.phpなどに、

<?php echo get_template_directory_uri(); ?>

などを使って、スタイルシートのURLなどを指定することが多いと思いますが、子テーマでは、こちらです。

<?php echo get_stylesheet_directory_uri(); ?>

▼参考にさせていただきました。
マイペースクリエイターの覚え書き「WordPress3.0子テーマで、パス指定にbloginfo(‘template_url’)は使えない」

カテゴリー
WPカスタマイズ備忘録

カスタムフィールドを記事で表示(出力)する方法のメモ

カスタムフィールドを記事で表示(出力)する方法のメモといより、タグに関する備忘録。

普通にテキストや画像URLを表示(出力)したいとき

カスタムフィールドのCODEXはこちらにありますが、テキストなんかを普通に出力する場合は、

get_post_meta($post->ID, 'cli_q_img', TRUE)

フィールドに記入した値が生のまま表示されます。フィールドにHTMLタグを使っているときはそれもそのまま表示されるので改行タグの扱いに困りました。

画像URL

画像をアップする場合は、まずアップロードしたファイルのidを取得してからURLを取得する二段構え(参照:フォーラムの「カスタムフィールドからの画像URL取得方法」)。


$fileid = get_post_meta($post->ID, フィールド名, false);
$fileurl = wp_get_attachment_url($fileid);
print $fileurl;

プラグイン「Advanced Custom Fields」を使っている場合

公式プラグイン「Advanced Custom Fields」を使っている場合は、独自のタグがあります。

get_field('フィールド名)

get_field(”)タグは、Advanced Custom Fieldsで設定した入力枠に記入した値が設定したとおりに出力されます。

HTMLを有効にしておけば、HTMLが効いた状態で出力されるし、自動的に改行タグを入れるよう設定してれば改行が自動で入ります。

画像URLは?

先ほどの画像URLは、Advanced Custom Fieldsのフィールド設定で、URLを取得するよう設定します。そしたら、

get_field('フィールド名)

これだけでURLが出力される。簡単だ。

▼Advanced Custom Fieldsのコードサンプル
http://www.advancedcustomfields.com/resources/getting-started/code-examples/

カテゴリー
WPカスタマイズ備忘録

WP-PostViewsでサムネイル画像を表示するには

WP-PostViewsは人気記事をカウントし、表示してくれるプラグインです。

このプラグインは記事名とカウント数を表示させるのはデフォルトでできます。しかし、サムネイル(アイキャッチ画像)が表示されない!

検索結果:プラグインの直接編集

WP-PostViewsでサムネイルを表示する方法は検索するとたくさん出てきます。WP-PostViewsのファイル自体に記述を書き足す方法です。

参考にしてたのは、こちらのサイト。記述が正確で、書いてくださっている通り記述したらサムネイルが表示できました。

▼rhasm.net「WP-PostViewsプラグインで、アイキャッチ画像をサムネイルとして表示させる方法」
http://blog.rhasm.net/wpp-postviews-how-to-display-eyecatch/

プラググインを編集しない方法

上記の方法でうまくいったんですが、プラグインを直接編集しない方法はないのかなーと。プラグインを直接編集するとバージョンアップのたびに書き直さないといけなくて面倒ですよね。

しかし!ぱっと検索したところ、プラグインを直接編集しない方法はない模様。残念!!

プラグインの編集は、私の場合は6か所書き換える必要がありました。うまく表示されなかった方で、1か所しか編集していない人がいたら、ぜひ確認を!

カテゴリー
WPカスタマイズ備忘録

ソーシャル用metaタグの書き方

備忘録として、ソーシャル用にheader.phpとfunction.phpに追加した情報をメモ。

header.phpに書いたのはフェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記と、WordPressでOGPを設定する方法 – NEX.FMを参考にさせていただいた以下のコード。



<meta property="fb:admins" content="--ここにfb:adminsを入れるーー" />
<meta property="og:title" content="<?php if ( is_home() ) {
 bloginfo('name');
 }else {
 echo wp_title('');
 } ?>"/>
<meta property="og:type" content="<?php if ( is_home() ) {
 echo "website";
 }else {
 echo "article";
 } ?>"/>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo home_url( '/' ); ?>img/noimage.gif" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:description" content="<?php if ( is_single() ) { //単独記事ページの場合 ?><?php echo $post->post_excerpt; ?>
<?php } else if (is_category()) { //カテゴリーの場合 ?><?php if ( category_description() ) : ?><?php echo  category_description(); ?><?php endif; ?>
<?php } else {// 単独記事ページ以外の場合 ?><?php bloginfo('description'); ?>
<? } ?>"/>

header.phpにこう書いておくと、以下のように表示されます。


<meta property="fb:admins" content="--ここにfb:adminsを入れるーー" />
<meta property="og:title" content="カスタムメニューの値を出力するコード"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://mycolor.ivory.ne.jp/customize/20120215222850.php"/>
<meta property="og:image" content="http://mycolor.ivory.ne.jp/wp-content/themes/SimpleNote2C/images/noimage.gif" />
<meta property="og:site_name" content="wordpress 今日のカスタマイズ記♪"/>
<meta property="og:description" content="wordpressを使ってカスタムメニューをトップページに表示させるためのタグです。"/>

ウェブサイトのトップではtypeがwebsiteになります(上記は個別記事での表示なのでarticleになっています)。titleのところもトップページではサイトタイトルを表示させます。descriptionも個別記事の概要・カテゴリー説明・サイト概要に対応させています。

[2012.11.20追記]1行目にfb:adminsの1行を足しました。Facebookでテストしたらエラーが出たため。フェイスブック用にOGPの設定してたら修正が必要な[いいね!]ボタンの警告? – ぷろめし|プログラミングよりも飯が好きを参考にさせてもらいました。

▼動作確認サイトはこちら
デバッガー – Facebook開発者

次にfunction.phpに以下の記述を追加。plantica – page:2をそのまま写させてもらってタイトル横の余白を消しています。


// 画像を表示させる用の記述
function get_featured_image_url() {
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id,'large', true);
    echo $image_url[0];
}

//wp_titleの$sepが空文字または半角スペースの場合は余分な空白削除
function my_title_fix($title, $sep, $seplocation){
    if(!$sep || $sep == " "){
        $title = str_replace(' '.$sep.' ', $sep, $title);
    }
    return $title;
}
add_filter('wp_title', 'my_title_fix', 10, 3);

ひとまずこのサイトでは実装できました。

カテゴリー
WPカスタマイズ備忘録

wordpressでログインユーザーのみ閲覧させるfunction.phpの書き方

新規サイトのテスト、テーマの検証などのために、非公開でwordpressサイトを運用したいことが多々あります。

  1. ⇒新規サイトのテスト
  2. ⇒新テーマのテスト
  3. ⇒仲間とだけ楽しみたいサイト
  4. ⇒会員制コミュニティーの運用

いままでは、設定>プライバシーで検索エンジンのインデックスを許可しないを選択していましたが、それではアクセスされたときには人の目に触れるんですよね。企業サイトの構築中などは、着替え中の試着室みたいなもので、開けられたらとっても困ります。

そこでためになったのが、TOKYO2012WordCampのたにぐちまことさんのセッション「テストサーバーで WordPressサイトを構築しよう!」です。
セッションの資料は公開されています

たにぐちさんのお話しでは、Basic認証、プラグインMaintenance Modeとfunction.phpを追加することで、他の人への非公開を徹底し、より確かなテストサーバーの運用が可能になるということでした。

そこで3つめのfunction.phpで非公開にする方法を導入しました。

このやり方はログインユーザーだけにサイトが見られるようにする方法で、導入も運用も簡単なのが嬉しいです。


/* ログインユーザーのみ閲覧させるための記述 */
function require_login() {
    if ( ! is_user_logged_in() && ! preg_match( '/^(wp-login.php|async-upload.php)/', basename( $_SERVER['REQUEST_URI'] ) ) && ! ( defined( 'DOING_AJAX' ) && DOING_AJAX )  && ! ( defined( 'DOING_CRON' ) && DOING_CRON ) ) {
        auth_redirect();
    }
}
add_action( 'init', 'require_login' );

▼参考にさせていただいたサイト
WordPressの表示をログインユーザーに限定する | Simple Colors

カテゴリー
WPカスタマイズ備忘録

サイドバーに♪ 特定カテゴリーの記事一覧をサムネイル画像付きリスト表示するタグ

wordpressのオリジナルテンプレートを作るときに使う、表示用タグ そのままメモ・シリーズです。

サイドバーなどに、特定カテゴリーの記事一覧を表示するためのタグです。サムネイル画像も表示させられるのがポイント。

たとえば全個別記事のサイドバーに、ニュース速報というカテゴリーの新着記事リストを表示する場合などに使えます。


	<article>
	<h3>カテゴリー名前などを入れる</h3>
	<ul>
	<?php $posts = get_posts('numberposts=0&category=1');//category=のところに、カテゴリーIDを入れる
	global $post;
	?>
	<?php
	if($posts): foreach($posts as $post): setup_postdata($post); ?>
	<li>
<?php
    	if (has_post_thumbnail()):
      	$title = get_the_title();
      	the_post_thumbnail(array(64,64), array('alt' => $title, 'title' => $title));
    	else: //アイキャッチ画像がなかった場合の処理
    ?>
    <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="64" height="64" />
    <?php endif; ?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><span><?php the_time('Y年m月d日(D)'); ?></span>
	</li>
<?php endforeach; ?>
<?php else : ?>
	<li><p>準備中</p></li>
<?php endif; ?>
	</ul>
	<!-- end//box2 --></article>
カテゴリー
WPカスタマイズ備忘録

カテゴリーページで記事一覧を表示するカスタムテンプレート

wordpressのオリジナルテンプレートを作るときに使う、表示用タグ そのままメモ。

カテゴリーページで記事一覧(サムネイル画像付き)を表示させるタグです。<li>タグを使っていて、そのカテゴリーへの投稿が1記事もない場合は「準備中」と表示するようにしています。


<article>
<h3><?php single_archive_title(); ?>情報</h3>
<ul>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); //記事概要を表示 ?>
	<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
	<?php
    	if (has_post_thumbnail()):
      	$title = get_the_title();
      	the_post_thumbnail(array(125,125), array('alt' => $title, 'title' => $title));
    	else: //アイキャッチ画像がなかった場合の処理
    ?>
    <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="125" height="125" />
    <?php endif; ?>
    <br /><?php the_title(); ?></a>
	<?php the_excerpt(); ?>
	</li>
<?php endwhile; ?>
<?php else; ?>
	<li><p>
<?php endwhile; ?>
<?php else; ?>
	<li>準備中</li>
<?php endif; ?></p></li>
<?php endif; ?>
</ul>

準備中 と表示させる理由は、投稿記事がない場合に<ul>を表示させない方法が分からなかったから。準備中 と表示させない場合は、以下の部分を <?php endwhile; endif; ?> と書くことができます。


<?php endwhile; ?>
<?php else; ?>
	<li><p>
<?php endwhile; ?>
<?php else; ?>
	<li>準備中</li>
<?php endif; ?></p></li>
<?php endif; ?>

ループとかいろいろ、自分では書けないPHPタグを人様のタグを参考にしながら書いているので、丸ごとメモしておかないとわからなくなるのです。

カテゴリー
WPカスタマイズ備忘録

カテゴリーのURLから「category/」を削除するプラグイン

私はほとんどのwordpressサイトで、パーマリンクの設定をーーーとしています。HTMLでサイトを作っていた頃の名残。。。

ところがwordpressではカテゴリーページ(category/index.html)のURLが、home/category/カテゴリースラッグ/index.html となるんですね。category/ が余計です。

htmlサイトをwordpressサイトに移行するときに、これが妨げになりプラグインで対応することにしました。

WP No Category Baseは最新のwordpressに対応していない

category/ を削除するプラグインとして有名なのが「WP No Category Base」です。私もずっと使っていました。

でも2012年のいつごろから、最新のwordpressのバージョンで使用できなくなりました。有効にしていても不具合はありませんが、category/ が削除されなくなったのです。

「WP No Category Base」はアップデートされていないので、wordpressのバージョンを落すか代わりを見つけないといけない。そこで知人が教えてくれたのが「WP No Category Base – WPML compatible」というプラグインです。

WordPress › WP No Category Base – WPML compatible « WordPress Plugins

「WP No Category Base」を停止して、「WP No Category Base – WPML compatible」をインストール、有効化するだけでOKです。

カテゴリー
WPカスタマイズ備忘録

画像の投稿への挿入でwidth、heightが自動挿入されないようにする方法

wordpressでは、画像をアップロードして、そこから簡単に記事に画像表示タグを貼りつけることができます。

とっても便利な機能ですが、スマホ対応のレスポンシブデザインにする際に一つ面倒なことがあり、それがwidthとheightの自動挿入でした。

いままでチマチマ手で消していましたが、忘れたり記事を書く担当の人がタグに詳しくなかったりするとちょっとした手間です。

function.phpに追記する方法にしました

そこで自動挿入されないようにする方法を取り入れました。

以下のコードをfunction.phpに追加するだけOKでした。


function remove_hwstring_from_image_tag( $html, $id, $alt, $title, $align, $size ) {
    list( $img_src, $width, $height ) = image_downsize($id, $size);
    $hwstring = image_hwstring( $width, $height );
    $html = str_replace( $hwstring, '', $html );
    return $html;
}
add_filter( 'get_image_tag', 'remove_hwstring_from_image_tag', 10, 6 );

※function.phpの最下行ではなく、「?>」の上に追加します。function.phpはバックアップしてからカスタマイズします。

wp-admin/includes/media.phpファイルを書き換える方法もあるそうですが(試していない)、wordpressのバージョンアップごとに書き換えないといけないのが面倒なので、function.phpに追記する方法にしました。

▼こちらのサイトからコードを貼りつけさせてもらいました。
WordPressの画像挿入時にwidthとheight指定が入らないようにする | Simple Colors

画像のHTMLソースにwidthが入らなくなったー♪

こちら、確認画像です。うれしー。

カテゴリー
WPカスタマイズ備忘録

カテゴリーごとに違うテンプレートを表示させる条件分岐の書き方

wordcamp東京2012で株式会社ベクターの鳥山優子さんが、企業サイトではカテゴリーごとに表示させたい内容が違うので、個別のテンプレートを用意するとよいと話されていました。

▼wordcamp東京2012のタイムテーブル
タイムテーブル | WordCamp Tokyo 2012

▼スライドはこちらで公開されています。
WordCamp Tokyo 2012 登壇しました | データベースに接続できません

手書きのHTMLサイトの場合はカテゴリートップページの内容が違っていることがあるので、これからwordpressに移行しようと思っている方なら、個人サイトの運営者であっても参考になる方法だと思いました。

【2012年9月20日 追記】最初に紹介した方法よりシンプルな方法を知りましたので、そちらを使うことにしました。

▼参考にさせていただいたサイト
WordPressテンプレートを各カテゴリ等で別々に使い分ける | フリーランスWebデザイナーの日記

デフォルトのカテゴリテンプレートは「category.php」ですが、特定のカテゴリ専用のカテゴリテンプレートのファイル名には「category-8.php」のように、ハイフンとカテゴリIDの数字をつけて保存するだけです。

とってもシンプル!

カテゴリーIDの調べ方

wordpress管理画面>投稿>カテゴリー で調べたいカテゴリーにマウスオーバー。

下にID=と表示された数字がカテゴリーIDです。

下に表示されない場合は、カテゴリーをクリックすると、URLに表示されます!

arcive.phpかcategory.phpに書くこと

【2012年9月20日 訂正】以下のやり方より簡単な方法を知りましたので、そちらに差し替えます。以下のやり方だと別に用意したテンプレートだけが読みこまれヘッダーやフッターが書けてしまうなどの不具合が出て(しかも一部のカテゴリーにだけ)しまったことも変更の理由です。

そこでさっそく作成中のサイトのwordpress以降で、カテゴリーごとに違うテンプレートを表示させる方法を取り入れました。

【作業1】
カテゴリーごとのテンプレートを用意する
⇒テキストファイルで表示させたい部分内容を書いて、category-css.php などの名前で保存する。保存するときの文字コードに注意(たいていutf8のはず)

【作業2】
arcive.php(category.phpがあるならそちらに)に違うカテゴリーテンプレートを読み込ませる記述をする。
⇒コードは以下の通りです

<?php
if ( in_category('★') ) {
	include(TEMPLATEPATH . '/category-css.php');
} else if ( in_category('★') ) {
	include(TEMPLATEPATH . '/★★★★');
} else {
	include(TEMPLATEPATH . '/category-base.php');
}
 ?>

WordPressのテンプレートをカテゴリ別に切り替える | webOpixelから引用させていただきました。

★の部分にはカテゴリーIDが入ります。
★★★★には作ったカテゴリーテンプレート名が入ります。

一つだけ違うテンプレートを表示させたい場合は、不要な行を消して書けばOK.

<?php
if ( in_category('★') ) {
	include(TEMPLATEPATH . '/category-css.php');
} else {
	include(TEMPLATEPATH . '/category-base.php');
}
 ?>

逆にもっと増やしたい場合は、

<?php
if ( in_category('★') ) {
	include(TEMPLATEPATH . '/category-css.php');
} else if ( in_category('★') ) {
	include(TEMPLATEPATH . '/★★★★');
} else if ( in_category('★') ) {
	include(TEMPLATEPATH . '/★★★★');
} else {
	include(TEMPLATEPATH . '/category-base.php');
}
 ?>