wordpress 今日のカスタマイズ記

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

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

<?php echo get_template_directory_uri(); ?>

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

<?php echo get_stylesheet_directory_uri(); ?>

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

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

普通にテキストや画像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-PostViewsは人気記事をカウントし、表示してくれるプラグインです。

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

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

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

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

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

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

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

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

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

備忘録として、ソーシャル用に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);

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

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

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

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

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

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

そこで３つめの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

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>