結局、URLへの自動リンクは自分で指定すべきだと思った件
先日、URLを自動リンクするWordPressプラグイン、Auto-hyperlink URLsという記事を書いたのですが、ソースコードの一部に不備が出たり、ここはリンクさせたくない…とかいろいろありまして、結局は自分の欲しいとこだけjQueryでやるのが一番いいなという結論に至りました。
古い内容です
現在はこのブログでは自動リンクは行っておりません
経緯
そもそもどうしてURLを自動リンクさせたかったかというのが、月1でtwitterを日記がてらまとめる際にURLリンク貼るのめんどくさいなーと思ったからなんです。普通の記事で参考URLを貼るのはそんなに苦ではないので、そこだけあれば良いんですよね。
それでプラグインが簡単と思って入れてみたんですが、やはりソースコードを載せている記事が多いため動作が微妙でした。数記事確認した時は大丈夫のように思えたんですが、一部変なとこが出たり…。
で、調べてみたらjQueryで自動リンクかけたいとこだけpタグにidを与えれば良いという記事が見つかって、なんだこれじゃんよー、と。
実装
jQuery
<script type="text/javascript">
(function($) {
$(".autlink").each(function(){
$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
});
})(jQuery);
</script>
WordPress以外への実装の場合は2,6行目は不要です。
html
<p class="autlink">このサイトのURLはhttps://ateitexe.comです。</p>
idだと最初の1回しか適用されないのでclassにしています。
こんな感じにリンクされます
このサイトのURLはhttps://ateitexe.comです。
参考
http://で始まるテキストをjQueryで自動リンク化 -jQuery Snippets（かちびと.net）
ソースコードとか扱わない内容のブログなら先述のプラグインで問題ないと思います。
2件のコメント
これは、画像に貼られているリンクと、ただのURLの記述の両方があるページだと、画像に貼られたリンクの画像が解除されておかしくなりますね。
りーちゃーさん、コメントありがとうございます。
限定的に使っているものなので画像との併用は試したことがありませんでした…！情報ありがとうございました！
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。