WordPressのKtai Styleで、特定の画像をaltのテキストに置き換える

WordPressでKtai Styleプラグインを使って携帯用表示をさせるときに、特定の画像をテキストにしたいことがありました。そこで携帯用表示時には、特定のclassのimg画像をaltの代替テキストに置き換えるようにしてみました。プログラムソースと一緒に公開します。

なぜそうしたのか

携帯用表示には、Ktai Styleプラグインを使っています。画像は自動で縮小され、とても便利です。しかし自分の使い方で不都合が起こりました。見出しに画像を使っている場合に、縮小された見出し画像の見栄えが悪かったのです。元が大きい画像だと、文字も含めて余計に小さく感じることも。
そこで見出しは、携帯では画像を表示せずに代替テキストのみを表示したいと思いました。そのような処理は、Ktai Styleの関数にはなさそうなので、下記プログラムを書いて対処しました。(WordPress3.2.1で確認)

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
	ktai style で、特定のclassの画像をaltの文字に置換える
	(見出し画像を携帯ではテキスト表示にしたい場合などに活用)
*/
// 初期設定(function.php?)などに
define( 'KTAI_IMG_TO_ALT_CLASS', 'ktai-alt' ); // 置換えるimg画像のclass名
 
// function.phpなどに
// フィルタ用関数
function ktai_img_to_alt_by_class( $img_html, $orig_html ="", $src ="" ){
	$r = $img_html;
	if( defined( 'KTAI_IMG_TO_ALT_CLASS' ) ){
		if( preg_match( '/class=[\"\']?([^>\"\']*)/i', $img_html, $m ) ){
			if( strpos( " ".$m[1]." ", " ".KTAI_IMG_TO_ALT_CLASS." " ) !== false ){
				preg_match( '/alt=[\"\']?([^>\"\']*)/i', $img_html, $m );
				$r = $m[1] ? $m[1] : "";
			}
		}
	}
	return $r;
}
// ktai styleにフィルタを設定する
add_filter( 'ktai_image_to_link', 'ktai_img_to_alt_by_class', 10 );

Ktai Styleが出力するimg画像のタグをフィルターで書換えています。
フィルター解説の$imageは$orig_htmlのことだと思いますが、$orig_htmlと$srcはテスト時に値が一度も入っておらず謎でした。今回$orig_htmlを使う方が確実だと思ったのですが)

使い方

上記ソースを、使用テーマのfunction.phpなどに入力します。
記事内で、テキストに置き換えたいimg画像にclassとalt属性を指定します。
   ↓
<img src="…" class="ktai-alt" alt="携帯では画像ではなくこの代替テキストを表示します" />

もちろんKtai Styleプラグインを有効にしていないと意味がありません。
以上。

その他、つらつらと

最初、見出しにはimg画像を使わず、CSSで背景画像による画像置き換えをしていました。ちゃんとHTMLでも見出しの文字を入れつつ、背景画像と表示が重なるのでCSSで文字を非表示に。するとCSSの違うKtai Styleでは文字のみで表示出来ます。スマートではないのですが問題はありませんでした。しかしテキストを非表示にするのはSEO対策的には良くないかもしれない…ということで、見出しに画像を使うことになったという経緯です。

SEO対策的にというのはわかるけど、CSS的には勿体ない話です。デザインを変更する場合、CSSなら一気にデザインを変更できるのに、img画像を使っちゃったらHTMLのコーディング変更も必要です。デザインとロジックを分けるCSSの役割が台無しです。更にこれからHTML5でアプリ的な使い方が増えると、非表示も多用されると思うのですが、どう折り合いをつけることになるのでしょう。このような問題の原因は、検索アルゴリズムというより、非表示などを悪用してスパムサイトを作る人たちにあるのでしょうね。
…とまぁ、携帯用CSSや画像を全部作れって話でもありますが(汗)。しかし、優秀なプラグインを使わせて頂くことも含めて、そもそもコンピューターってある程度楽をする為にあると思いません???


見出しの見栄えとSEO対策を合わせて考えると、今回の機能は既にプラグインにあるか誰かがやっていると思いましたが、検索してもほとんど該当しないのは意外でした。どうか誰かのお役に立ちますように。

ちなみに見出しに画像を使っているのは、このサイトのことではありません。執筆現在、このサイトのデザインはほとんど手つかずです。いずれなんとかしなきゃ…。(^_^;)
お付き合いありがとうございました。読んでくれてありがとう!

WordPressで記事作成者の権限レベルによって動作を変えるには?

記事中で実行するphpコード(ショートコード)でそのような判別が必要になったので、自分のメモを兼ねて書いておきます。
間違っているかもしれないので参考程度にどうぞ。(WordPress3.0と3.0.4で確認)

1
2
3
4
5
6
// WordPressループによる記事の処理中に・・・
$user = get_userdata( get_the_author_meta('ID') );
$user_level = (int) $user->user_level;
if( $user_level >= 8 ){ //権限レベルの判別
	// この行は記事作成者が管理者権限だと実行される
}

上記のソースでいう$user_levelの値で判別してみました。権限レベルの判別の行の「8」が、管理者権限であることを示しています。
この値は、権限レベルの値です。0は購読者、1は寄稿者(1以下は書き手全員)、2〜4は作成者、5〜7は編集者、8〜10は管理者となります。
各書き手の権限レベルは、管理ページ→ユーザー→プロフィール→権限グループの設定で決まります。
(ちなみに読み手の権限レベルではないので勘違い注意。書き手を判別する話)

しかしここまで書いておいて、この権限レベルって、WordPress3.0から非推奨になったらしい。しばらく使えるとは思うけども。代わりの「ユーザーグループ権限とユーザー権限」ってのがあるようですが利用方法…というか意味がよくわかりません(汗)。ただ拡張された感じにも見えるけどどうなんでしょう。エキスパートな方がいましたらぜひ教えて下さい。
わかったらソース直す予定です。

ちなみに自分がこの判別を利用した例は「WordPressの記事内でPHPを実行するショートコード(プラグインではなく)」にあります。

お付き合いありがとうございました。


2013.2.4. 非推奨のget_the_author_IDをget_the_author_meta(‘ID’)に変えました。

WordPressの記事内でPHPを実行するショートコード(プラグインではなく)

WordPressでこのサイトを作りながら、ショートコードについてあれこれ試行錯誤をしつつ、時代錯誤も繰り返している今日この頃…。

そんな中「記事中で任意のPHPコードを動かすのって、ショートコードでも出来るんじゃない?(既存のプラグインを使わずとも)」と思って、やってみたら動いたのでご報告。ちょっと裏技的。
(執筆時2010.07.WordPress3.0、公開時2011.01.WordPress3.0.4で確認)

ソースコードと使い方

ソースコード。ショートコードphp_evalの定義。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 初期設定などに
define( 'SC_PHPEVAL_USERLEVEL', 5 ); // 実行を許可する、記事を書いた人の権限レベル
 
// [php_eval] のコード
function shortcode_php_eval( $atts, $content ="" ){
	$r = '';
	$user = get_userdata( get_the_author_meta('ID') );
	$user_level = (int) $user->user_level;
	$level = SC_PHPEVAL_USERLEVEL;
	$level = is_null( $level ) ? 5 : (int) $level; // 未設定はとりあえずレベル5
	if( $user_level >= $level ){
		$r = $content;
		$r = preg_replace( '/^.*<pre>/is'  , '', $r );
		$r = preg_replace( '/<\/pre>.*$/is', '', $r );
		$r = eval( html_entity_decode( $r ) );
	}
	return $r;
}
add_shortcode( 'php_eval', 'shortcode_php_eval' );

とりあえず定番な感じでテンプレートの「function.php」へ書き込めば動くはずです。
人に親切(?)なソースです。色々わかる人なら無駄なく短くできますね。(短いソースも下方に置いてみたよ!)

記事中でのショートコードの書き方は、次の通り。

[php_eval]<pre> ......php code...... </pre >[/php_eval]

※上記の</pre >は、必ず半角スペースを取って</pre>にして下さい。(このページの表示の都合)

ちょっとした思いつきですが、たったこれだけで動くのなら使いたくなる人もいるのでは??

特徴と注意点・・・

  • ショートコード内は、必ず<pre>タグで囲み、その中にPHPコードを書くこと。
  • 記事の編集は「ビジュアル」でなく「HTML」で書くこと。また投稿設定「不正にネスト化したXHTMLを自動的に修正する」のチェックを外すこと。プラグインPS Disable Auto Formattingも必要かも。
  • 記事の作成者の権限レベルで、実行するか実行しないか判別している。
  • returnで返した値は、ショートコードのあった場所に出力される。
  • ちゃんと動くかテストしてちょ。

テスト

今日の日付を表示する下記のコードを実行してみます。(※</pre >は、</pre>に)

[php_eval]
<pre>
return "<p><em>今日は「".date("Y年m月j日")."」です。動いてるね!</em></p>";
</pre >
[/php_eval]

ここで実行↓↓↓↓↓↓↓↓

今日は「2019年06月27日」です。動いてるね!

ここで実行↑↑↑↑↑↑↑↑

もちろん実行するPHPコードに注意して下さいね。うっかり$postを書き換えたりして、その後のページの表示がおかしくなるとかありがちです。

読み飛ばしてもいいかもな解説

<pre>タグで囲うのが気持ち悪いですが、これがないとPHPコード内の例えば「"」が「&quot;」になるらしくエラーが出て動きません。あとWordPressが勝手に追加する<p>や<br>タグなどを防ぐためにHTMLで編集。管理画面→設定→「投稿設定の不正にネスト化したXHTMLを自動的に修正する」のチェックも外すこと。同じ目的でプラグインPS Disable Auto Formattingも必要かも。

一応セキュリティ対策で、記事を書いた人の権限レベルによってPHPを実行出来るか決めています。権限レベルとその注意は「WordPressで記事作成者の権限レベルによって動作を変えるには?)」を参考にどうぞ。
しかし不特定多数が編集する環境でPHP実行出来ちゃうのはちょっと恐いですよね。充分に管理が行き届く範囲で使って下さいね。

ご利用は自己責任にて、充分にテストをして問題がないことを確認して使って下さい。<pre>タグで囲むなどその辺りの文字化け(?)対策が完全なのか若干心配です。問題点や解決策がわかっちゃうエキスパートでステキな人がいましたらぜひ教えて下さい!

おまけの短いソース

色々省いて、短くしたソース。

1
2
3
4
5
6
7
8
9
// [php_eval] のコード
function shortcode_php_eval( $atts, $content ="" ){
	$user = get_userdata( get_the_author_meta('ID') );
	if( (int) $user->user_level >= 5 ){ // 権限レベルの判定
		$r = eval( html_entity_decode( preg_replace( array('/^.*<pre>/is','/<\/pre>.*$/is'), '', $content ) ) );
	}
	return $r;
}
add_shortcode( 'php_eval', 'shortcode_php_eval' );

もっと短くしたソース(笑)。権限判定も省略したので誰の記事でも実行されます。自分だけで使うブログならこれもありじゃない??

1
2
3
// [php_eval] のコード
function shortcode_php_eval($atts,$content=''){return eval(html_entity_decode(preg_replace(array('/^.*<pre>/is','/<\/pre>.*$/is'),'',$content)))}
add_shortcode('php_eval','shortcode_php_eval');

ショートコード名はphp_evalじゃなくてもいいけどphpとかありがちのにすると、プラグインなど他のプログラムとぶつかるかも。


さてさて、最後までお付き合いありがとうございます。
皆様の幸せを心より願いまして、あばよっ! またねっ!


2013.2.4. 非推奨のget_the_author_IDをget_the_author_meta(‘ID’)に変えました。