Wordpress

WordPressで記事抜粋のdescriptionと記事タグをkeywordsに自動挿入する方法

通常、ヘッダに入るmetaタグのdescriptionとkeywordsは全ページ共通のことが多いが、SEOに適したヘッダにするためには、各ページ毎に合わせたmetaタグでdescriptionとkeywordsを設定しておくのが好ましい。

WordPressのプラグイン、All in One SEO Packは各記事に対して個別のdescriptionとkeywordsを設定することができるが、WordPress PDA & iPhoneのような特殊なテンプレートでは反映されないケースが生じる。

そういった場合に対応し、descriptionには記事の抜粋、metaタグのkeywordsには記事で設定したタグが自動で入るようにする。

以下のコードを既存のメタタグ部分と差し替え、または挿入する。
なお、前半、descriptionの部分にある「160」は抜粋(カット)する文字数なので、160文字も必要ないという人は適宜変更してもらいたい。
また、キーワードに関してはgoogleは一切評価しないとも言われているが、SEO全体としてkeywordsもきちんと記載することが好ましいと考える。
下記のコードではタグに設定したものを半角カンマ区切りで書き出し、タグが未設定のものはデフォルトのキーワードを書き出す。

<meta name="description" content="<?php
$descrip = mb_substr(ereg_replace("(\r|\n|\r\n)","",strip_tags($post->post_content)),0,160)."...";
if(is_single()){echo $descrip;}else{bloginfo('description');}
?>" />
<meta name="keywords" content="<?php
$tags = get_the_tags();
if($tags){
$total = count($tags); $count = 1;
foreach($tags as $tag){
if($total == $count){echo $tag->name;}else{echo $tag->name . ', ';}
$count++;
}
}else{echo 'デフォルトのキーワード';}
?>" />

 

WordPressのスマホ用プラグインwp-pdaのカラーカスタマイズはこの方法

iPhone・Android等のスマートフォンに対応させるWordPress用のプラグインWordpress PDA & iPhone(wp-pda)はベースにJquery mobileを使用している。
そのためwp-pdaの配布ファイルでは、ウェブサイトを高速化するため、jquery、jquery mobileの各javascriptおよびスタイルシートcssはCDNで直接呼び出しており、CSSを使ったカスタマイズが分かりにくいという難点がある。
デフォルトでは黒いタイトルラインとブルー系のナビボタン、日付になっているが、これを変更したいと思うことは多いはず。
色の変更であれば、意外なほど簡単に配色をカスタマイズしてサイトのデザインを変えることが可能なので紹介。

修正するのは以下のファイル
wp-content/plugins/wp-pda/style.css

ファイルを開き、最後に以下のスタイルシートを追加する

.ui-btn-active,
.ui-bar-b,
.ui-bar-c {
background: #fff;
color: #fff;
font-weight: bold;
border: 1px solid #bf0059;
text-shadow: 0 -1px 1px #bf0059;
text-shadow: none;
background-image: -webkit-gradient(linear, left top, left bottom, from( #ffbbca), to( #ff90a7));
background-image: -webkit-linear-gradient(#ffbbca, #ff90a7);
background-image: -moz-linear-gradient(#ffbbca, #ff90a7);
background-image: -ms-linear-gradient(#ffbbca, #ff90a7);
background-image: -o-linear-gradient(#ffbbca, #ff90a7);
background-image: linear-gradient(#ffbbca, #ff90a7);
}

各項目の解説

background:
ヘッダ、タイトル、ナビ選択状態の背景色

color:
ヘッダ、タイトル、ナビ選択状態の文字色

border:
回りのラインの色(同系色の濃いめにすると良い)

text-shadow:
タイトル文字の影(同系色の濃いめにすると良い)

background-image:
複数あるが、多くのブラウザに対応させるためのもの(同じ色で指定していく)

WordPress PDA & iPhone不具合修正(サブカテゴリ対応版)

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) を新しいjQuery Mobileで使用すると、カテゴリー表示にした場合にレイアウトに不具合が発生する。
前回のエントリ『Wordpress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法』では、カテゴリを呼び出す階層を制限することで表示不具合に対処したが、サブカテゴリに辿り着けないのは不便なため、別の修正方法をとることにした。

前回修正してしまっている場合も、

<?php if($detectedPage=='categories') :?>
〜
<?php endif; ?>

をそのまま入れ替えればいい。

修正するのは、前回と同じ以下のファイル
/plugins/wp-pda/jqmobile-theme/index.php

オリジナル

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r|\t|> </", "", $categoriesHTML);
$categoriesHTML = str_replace("a> (",'a><span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")<ul class='children'>","</span><ul class='children'>",$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span></li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

に変更する。

この修正を施すことにより、カテゴリリストをタップすると、サブカテゴリが存在する場合はサブカテゴリ一覧、無い場合は該当カテゴリのファイル一覧が表示される。

WordPress PDA & iPhone (wp-pda)カテゴリ表示での不具合修正方法

WordPressをiPhoneやAndroidなどのスマートフォンに対応させるプラグインとして、Wordpress PDA & iPhone (wp-pda) は便利だが、jquery mobileのバージョンをjQuery Mobile 1.1や、新しいjQuery Mobile 1.2にすると、カテゴリー表示にした場合にレイアウトに不具合が発生する。

症状としては、エラー等で表示されない訳ではなく、サブカテゴリまであるカテゴリの表示部分に余分なテキスト等が表示されてしまい、表示が崩れてしまう。
階層が浅いサイトならば問題なく使える場合もあるだろうが、現実的にはこの表示バグを修正した方が良いだろう。

修正するのは以下のファイル
plugins/wp-pda/jqmobile-theme/index.php

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0'); $categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML); $categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML;
?>
</ul>
</div>
<?php endif; ?>

<?php if($detectedPage=='categories') :?>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<?php
$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0&depth=1');
$categoriesHTML = ereg_replace("/\n\r|\r\n|\n|\r/", "", $categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace(" ",' ',$categoriesHTML);
$categoriesHTML = str_replace("a> (",'a> <span class="ui-li-count">',$categoriesHTML);
$categoriesHTML = str_replace(")</li",'</span> </li',$categoriesHTML);
echo $categoriesHTML; ?>
</ul>
</div>
<?php endif; ?>

のように修正。具体的には

$categoriesHTML = wp_list_categories('title_li=&show_count=1&echo=0');

の部分に「&depth=1」を入れて階層取得を1階層に制限するだけの話。

この1行を修正するだけで、表示バグは直る。

WordPressのプラグインtweetableにハッシュタグを追加したい時

最近は高機能なWordPressのTwitterプラグインが増えているが、シンプルなtweetableが使い易い場合もある。

ただ、ハッシュタグを管理画面から設定することができないので、統一したハッシュタグを入れたい場合不便。

tweetableでハッシュタグを追加したい時は以下のように修正する。

wp-content/pluginsにあるtweetable.phpを開き、

$tweet = $twitter->fit_tweet($title, $permalink);
↓
$tweet = $twitter->fit_tweet($title, $permalink).' #ハッシュタグ';

WordPressバージョンを3.4.2にバージョンしたらCustom Field Gui Utilityが使えなくなった時

WordPressの3.4.1までは問題なく使えていたCustom Field Gui UtilityがWordPressバージョンを3.4.2にバージョンしたら使えなくなった時は、以下の方法でcfg-utility.phpを修正する。
cfg-utility.phpは
wp-contentのpluginsにインストールしたcustom-field-gui-utilityのプラグインファイル群の中にある
cfg-utility.php内にある
add_action ('simple_edit_form', array ('cfg_utility_class', 'insert_gui'));

add_action ('edit_form_advanced', array ('cfg_utility_class', 'insert_gui'));

のように修正する。

いずれ3.4.2に対応したCustom Field Gui Utilityが出ると思うが、それまでの対応として。
参考:

http://mbdb.jp/hacks/wordpress/wp3-3-custom-field-gui-utility.html