aタグの中にspanタグを追加する独自関数を教えてください

解決済 echizenya
(@echizenya)

3年、 10ヶ月前
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

—

【質問の主旨】

記事の本文が読み込まれたタイミングで、aタグの開始タグと閉じタグに、spanタグを挿入する独自関数の書き方を教えてください。

【質問の補足】

1. aタグが読み込まれたときになってほしい状態

現在、ヘルプが必要なページではaタグがある箇所は以下のように読み込まれます。
```
<ul>
<li>
<a href="https://www6.nhk.or.jp/nhkpr/post/original.html?i=23759" rel="noopener noreferrer" target="_blank">
新作5話、6月8日から5夜連続放送！　大家さんと僕 ｜NHK_PR｜NHKオンライン
</a>
</li>
</ul>
```
functions.phpに冒頭で質問した独自関数を追加することで以下の通りに読み込ませたいと考えています。
```
<ul>
<li>
<a href="https://www6.nhk.or.jp/nhkpr/post/original.html?i=23759" rel="noopener noreferrer" target="_blank">
新作5話、6月8日から5夜連続放送！　大家さんと僕 ｜NHK_PR｜NHKオンライン
 (新しいタブで開く)
 
</a>
</li>
</ul>
```
独自関数を追加することでブログサイトの記事本文で使われているすべてのaタグに対してspanタグを追加したいと考えています。

2. 自分が考えた独自関数
```
// spanタグを付加する関数
function screen_reader( $text ) {
 if ( stripos( $text, 'target' ) !== false && stripos( $text, '<a ' ) !== false ) {
 // aタグ内にspanタグを追加する
	 
 }
 return $text;
}

if ( !is_admin() ) {
 add_filter( 'the_content', 'screen_reader', 10, 2 );
}
```
コメントアウトの下の行において、すでにaタグに挟まれているテキストの後ろにspanタグを追加するPHPコードを書くことになると思います。ですがその書き方が分かりません。

3. 参考リンク

今回の質問は以前、WordPressフォーラムで質問をしたときにいただいた投稿をヒントに基づいています。

ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)

ishitaka

(@ishitaka)

3年、 10ヶ月前

こんにちは

aタグの中にspanタグを追加する

すべての a タグが対象ではなく、target 属性を持つ a タグが対象ということでよろしいでしょうか？
この場合は、下記のような感じではどうでどうでしょう？

コンテンツに script/style タグを含まないことを前提にした場合:

$after = '<span class="screen-reader-text">(新しいタブで開く)</span><span aria-hidden="true" class="dashicons dashicons-external"></span>';

$text = preg_replace( '|(<a\s[^>]*target\s*=[^>]*>.*)(</a>)|i', '${1}' . $after . '${2}', $text );

script/style タグを考慮する場合:

$after = '<span class="screen-reader-text">(新しいタブで開く)</span><span aria-hidden="true" class="dashicons dashicons-external"></span>';

$script_and_style_regex = '/<(script|style).*?<\/\\1>/si';

preg_match_all( $script_and_style_regex, $text, $matches );
$extra_parts = $matches[0];
$html_parts  = preg_split( $script_and_style_regex, $text );
foreach ( $html_parts as &$part ) {
	$part = preg_replace( '|(<a\s[^>]*target\s*=[^>]*>.*)(</a>)|i', '${1}' . $after . '${2}', $part );
}

$text = '';
for ( $i = 0; $i < count( $html_parts ); $i++ ) {
	$text .= $html_parts[ $i ];
	if ( isset( $extra_parts[ $i ] ) ) {
		$text .= $extra_parts[ $i ];
	}
}

参考ページ: wp_targeted_link_rel() | Function | WordPress Developer Resources

トピック投稿者

echizenya

(@echizenya)

3年、 10ヶ月前

@ishitaka さん。
こんにちは。いつもコメントありがとうございます。

すべての a タグが対象ではなく、target 属性を持つ a タグが対象ということでよろしいでしょうか？

ご指摘の通りです。またコンテンツに script/style タグを含まないことを前提にしています。したがってfunctions.phpの最下行に下記のコードを追加した上で運用しています。

//  記事本文中target属性をもつaタグにスクリーンリーダーを読み込む
function screen_reader( $text ) {
  if ( stripos( $text, 'target' ) !== false && stripos( $text, '<a ' ) !== false ) {
      // spanタグの追加
      $after = '<span class="screen-reader-text"></span><span aria-hidden="true" class="dashicons dashicons-external"></span>';
      $text = preg_replace( '|(<a\s[^>]*target\s*=[^>]*>.*)(</a>)|i', '${1}' . $after . '${2}', $text );
  }
  return $text;
}

if ( !is_admin() ) {
  add_filter( 'the_content', 'screen_reader', 10, 2 );
}

なお、質問文において(新しいタブで開く)としていましたが、(新しいタブで開く)のテキストは削除しました。

今後ともどうぞよろしくお願い申し上げます。

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「aタグの中にspanタグを追加する独自関数を教えてください」には新たに返信することはできません。

トピックタグ

表示