【jQuery】記事本文のリンクだけを強制的に別ウィンドウ表示にする方法

デザイン

すでに投稿した記事本文のリンクターゲットを変更したい場合、
一つ一つ編集するのは手間になります。
これをjQueryで一括置き換えをする方法を紹介します。

テーマ内で記事本文を含んだ要素を確認する

記事本文を表示する関数は the_content() なので、この関数を囲んだ要素をチェックします。
下記の例では post_content クラスが要素の親になっています。

<div class="post">
	<h3><?php the_title(); ?></h3>
	<p><?php the_time('Y/m/d H:i:s'); ?></p>
	<div class="post_content">
		<?php the_content(); ?>
	</div>
</div>

ヘッダーに別窓リンク表示のためのjQueryを追加する

下のコードをjsとして保存してヘッダーから呼び出します。
.post_content は上で囲ませた要素のクラス名です。
WordpressではJQueryのコンフリクトが起きない様に $ ではなく jQuery で記述します。

/テーマフォルダ/js/common.js

jQuery(function($){
    $(".post_content a[href^='http://']").attr("target","_blank");
});
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/common.js"></script>

これで post_content 内のリンクは全てターゲットが別窓になります。

デザイン

関連記事