WordPressでリンクを貼る方法を2種類を紹介

ワードプレス

今回は、WordPressで別の記事のリンクや外部サイトのリンクの貼り方で、非常に簡単に出来る2つの方法を紹介します。

リンクとは、ハイパーテキストリンクの事を指しHTMLで動作するURL同士をリンクさせるテキストの事です。WordPressの場合HTMLの記述をしなくても簡単にリンクさせる事が出来るのでまずはその方法から紹介します。

(後半では、WordPressの機能を使わずにリンクさせる記述の方法も紹介します。)

WordPressで簡単リンク作成

使用するエディタはGutenberg(グーテンべルグ)と言われるWordPress5.0以降の標準エディタです。

1.URLのコピー

まずはリンクさせたいページのURLをコピーしときましょう。

PCの場合『command + C』を同時に押せばコピーされます。これをショートカットキーと言います。

2.グーテンベルク・URL直書き

WordPressの投稿のグーテンベルクエディタで、先程のURLをペーストするだけ下記の様にURLが貼られます。

https://ka-holidayrefresh.com/wordpress-plugin/

ショートカットキーは『command + V』です。

*WordPress標準機能のEmbed 機能により直書きURLがブログカード化してしまうテーマもありますので、望まない場合はテーマの設定でOFFにしましょう。

3.グーテンベルク・ハイパーリンクテキスト

URLをハイパーリンクテキストにしたい場合は、グーテンベルクから通常のテキストを入力します。

そのテキストを全選択して、そこに上書きペーストをするノリで先程コピーしたURLをペーストすると下記の様にハイパーリンクテキストになります。

WordPressでのプラグインの入れ方(外部からも含め紹介)

*うまく行かない場合は、テキストを選択したら、ブロックのメニューな🔗←のようなマークを押してURLをペーストするか……」の部分にURLをペーストして↩︎を押せば同じ様に出来ます。

HTMLでリンクの挿入

HTMLでリンクを挿入する場合、多少HTMLの知識が必要になります。全く知らないって方はまずは下記の記事でHTMLの考え方に付いてを知り、その後同記事内にあるドットインストールという一部無料の動画サイトでHTMLの書き方を覚えた方が良いと思います。

ここでは基本的なHTMLの考え方を知っていると思い説明します。

HTMLとして編集・カスタムHTML

グーテンベルクのブロックメニューの下記の場所から『HTMLとして編集』もしくはエディタのブロックの『カスタムHTML』を選びます。

そこに下記のHTMLを使って下さい。テキスト部分を直せばコピペで使えます。

<a href="ここにリンクしたいURLを入れます">
テキストをここに入れます</a> 

例文

<a href= "https://ka-holidayrefresh.com/photothumbnail/">
サムネイルの適正サイズを調べ縦横幅をぴったりにする方法</a>

例文の見え方

サムネイルの適正サイズを調べ縦横幅をぴったりにする方法

新規タブで開く

*またリンクで飛んだ先を新しいタブで開きたい場合、下記のよう「target=”_blank”」を入れて下さい。

<a href="ここにリンクしたいURLを入れます" target=”_blank”>
テキストをここに入れます</a> 

以上がWordPressでリンクを貼る方法の最も簡単な2種類を紹介でした。

他にはphpを使って動的にハイパーリンクテキストを生成したり、写真に埋め込んだりと色々とリンクさせる方法はありますが今回は最も簡単な方法のみの紹介になります。

HTMLに関しても本気で取り組めば1時間くらいで理解できる内容なので挑戦してみて下さい。

また下記記事の様に相対パスを活用すればスマートにリンクを作成できます。