【WordPress】記事本文のキーワード(タグ)をハイパーリンクに変換するとはてなダイアリーっぽいサイトが作れる

徒然草2.0

10年以上前からなんだけど、はてなダイアリーみたいなキ―ワードをハイパーリンクに自動でしてくれるようなCMSがあったらいいのにな…と思っていたが細部まで拘ると結構難しくて作れなくなってしまっていたが…ワードプレスのURL形式とテーマの機能をちょっと工夫すれば簡単にできるんじゃね?(しかも、運用も比較的に楽)と思ってサクッとプロトタイプを作ってみた。

デモページはこちら → ぼんぷラボ

色々と変えていくので、ここで書いているとおりにはなっていないかもしれないが大枠はずれていないはずだが…トップページのリンクや各ページ(single.php)のリンクは基本的に自動で付与される。英単語ごとにページとタグをつくっておけば、英単語がハイパーリンク化されて各ページ飛ぶ。文章中に現れた単語の意味なんかをすぐハイパーリンクを押して確認ができるという利点がある。ま、より具体的に何に使うのか?というのはさておき、こういうのがサクッと作れるのは単純に面白いと思うんですが。。。

なおsingle.phpのソースコードはこれだけ↓タグを正規表現でハイパーリンクに置き換えている。

<?php get_header(); ?>
  <h1><?php bloginfo( 'name' ); ?></h1>
  
  <!-- 記事タイトル -->
  <h2><?php the_title(); ?></h2>

  <!-- タグの取得 -->
  <?php $posttags = get_the_tags(); ?>
  
  <!-- 本文の取得 -->
  <?php $content = apply_filters('the_content',get_the_content()); ?>

  <!-- タグを置き換える -->
  <?php if($posttags):
    foreach ( $posttags as $tag ):
      $content = str_replace(
         $tag->name
        ,'<a href="'. get_home_url(null, $tag->name). '">'. $tag->name. '</a>'
        ,$content);
    endforeach;
  endif; ?>

  <div>
	<?php echo $content ?>

	<!-- google link -->
	[<a href="https://www.google.co.jp/search?q=<?php echo urlencode(get_the_title()); ?>" target="_blank">google</a>]
	[<a href="https://www.google.co.jp/search?q=<?php echo urlencode(get_the_title()); ?>&tbm=isch" target="_blank">google画像</a>]
	  [<a href="https://ejje.weblio.jp/content/<?php echo urlencode(get_the_title()); ?>">weblio</aa>]
	  
  </div>

<?php get_footer(); ?>

英単語はGoogle画像検索などでリンクされているので、単語の意味を視覚的に把握することができる。weblioなんかで事細かく意味を調べてもいい。現在はIT用語と英単語をごっちゃにしてしまっているのでカオスっているが、英単語やIT用語というカテゴリごとにテンプレートをわけて表示を変えてあげたら見栄えもよくなるだろう。英単語の場合は派生語というフィールドが自動で追加されたり、IT用語だったら類義語や関連語などが自動で出る感じ。

いくつか問題点があって…英単語が複数の単語の場合にはうまくリンクを貼れない。hello_worldみたいにハイフンをつけたりしないといけないかも。あと過去形とか大文字小文字の区別とか同表記語などはうまく扱えないので、そのへんはWordPressゆえの限界があると思っている。本当は限界がないハイパーリンク自動化の仕組みが作れたらいいと思っているが、このWordPressテーマでの実装はうまく使うと面白いコンテンツがつくれそう。実際にこれも歴史データベースなるものを作ろうとしてできた副産物で英語学習とか何らかの情報をまとめに使えるんじゃないかと考えているところデス。

徒然草2.0
スポンサーリンク
シェアする
gomiryoをフォローする
ごみぶろぐ

コメント

タイトルとURLをコピーしました