Sorairo

photo credit: Waag | technology & society Hackers & Designers summercamp via photopin (license)

WordPressの記事中に内部リンクと外部リンクを出力するショートコード

テーマ作成時に参考にした記事を実例とともにご紹介するシリーズです。
今日はタイトルのまんまですが、ブログの本文中に外部リンクや内部リンクを貼る際、ただの文字列リンクではなくブログカードのような外観にするためのショートコードを(他ブログを参考に)作成しましたので、ご紹介します。

advertisement

完成形

まずは完成形から。
当ブログでは以下のような形で表示されるように調整しています。

内部リンク

外部リンク

参考にしたサイト

検索するとたくさんの記事が出てくるのですが、個人的に

  1. コードがシンプル
  2. コードが分かりやすい(理解しやすい)
  3. プラグインを使わない

ものを選択しました。
内部リンクは以下の記事を参考にしました。

外部リンクは以下の記事です。

内部リンクのショートコード

上記の記事で紹介されている通りなんですが、まずはfunctions.phpに以下を追加します。

20行目で出力される画像の横幅を、21行目では高さを指定しています。
また、22行目ではアイキャッチ画像が設定されていない場合に表示される画像へのパスを記載しています。

41行目からは実際に出力されるHTMLが記述されています。
この辺は元のコードからオリジナルに変更していますので、参考記事を参照してご自身のブログに合うように変更してください。

ご参考までに当ブログで設定しているCSSを掲載します。

外部リンクのショートコード

続いては外部リンクです。
これも上記の記事を参考に、当ブログでは以下のようにしました。

ご紹介した記事では抜粋文も取得するようになっていますが、そこまですると見た目が悪いのでそこはばっさりカットしました。
CSSは以下のようにしました。

見た目のデザインが内部リンクと同じなので、記事タイトルの前に付けたアイコンを「関連記事」と「参考」にすることで変化を付けました。

執筆時

ブログ記事を書く時に、Google Chromeの拡張機能であるCreate Linkを使って楽しています。

内部リンクは

外部リンクは

と設定し、ワンクリックでコードを取得できるようにしています。

最後に

いかがでしたでしょうか。
ここでは簡単なご紹介しかしていませんので、詳細は参考記事を必ずご確認ください。
特にfunctions.phpに手を加える時はご注意ください。
コードを間違ったり余計な余白とか改行が入るとエラーになって画面真っ白頭真っ白状態に陥りますので、バックアップを取ってから臨むことをお勧めします。

advertisement

related posts

WordPressの記事中にプラグインなしで目次を追加しました。

プラグインを使わずに記事中に目次を追加しましたのでご紹介します。

初めての有料テーマ「ALBATROS」を購入しました!

初めて有料のWordPressテーマを購入しました。有料なだけあってデザインもいいし機能満載でブログ執筆意欲を掻き立てられます。

WordPressのオリジナルテーマを自作しました。

テーマを変えたら自分でも作りたくなったので作ってみました。

私のブログ更新作業環境まとめ。

ブログを書く環境って大事ですよね。継続することの難しさはその環境のせいもあるかもしれません。

テーマを自作する〜その③〜アイキャッチ画像に関するあれこれの2回目。

WordPressのアイキャッチ画像に使える写真サイトの紹介と、キャプション表記についてのコツについてご紹介します。

WordPressのテーマをLION MEDIAに変更しました。

WordPressのテーマをLION MEDIAに変更しましたのでご紹介します。

テーマを自作する〜その②〜アイキャッチ画像に関するあれこれの1回目。

テーマを自作するシリーズの第2回目は、WordPressでアイキャッチ画像を使えるようにするために必要なことについて調べてみました。

ブログのカテゴリーを見直してみました

新しいテーマに変更しましたので、ついでにカテゴリーも見直してみました。

WordPressにプラグインなしで色々と実装する方法

プラグインは便利ですけど重たくなる場合があるためできるだけそれに頼らずテーマ作成を行いました。

今日からまた、WordPress始めます。

心機一転、新たにブログを書き始めます。iPhoneを購入して一変した私の人生を記録していければと思っています。