WordPressの記事内でリンクを貼る方法を紹介します。テキストリンクやボタンリンク、画像リンクの貼り方や、埋め込み機能の使い方などがわかります。リンク先URLの編集や、リンクの解除も簡単です。

WordPressの標準機能「パーマリンク」について知りたい場合は、下記ページをご覧ください。
パーマリンク設定を変更する

WordPressの記事内でリンクを貼る方法

WordPressの記事編集画面では、簡単にリンク(ハイパーリンク)を挿入できます。投稿でも固定ページでも、同様の手順でリンクを貼ることができます。

リンクの貼り方としてよく用いられるのが、記事内の一部のテキスト(文字列)にリンクを設定する方法です。これを、テキストリンクといいます。

まずは、テキストリンクの設定方法を見ていきましょう。リンクの貼り方は、

  • 他のサイト内ページにリンクする「外部リンク
  • 自分のサイト内ページにリンクする「内部リンク

のどちらを設定するかによって、少しだけ手順が異なります。

ページ内の特定場所にリンクを貼る方法は、この記事の後半「ページ内リンクを貼る方法」でご紹介しています。

外部リンクは、記事を書く上で参考にしたページや、関連するサイトなどに誘導したいときに使います。では、外部リンクを貼る手順を見ていきましょう。

手順1
リンク先にしたいページを開き、URLをコピーします。

リンク先にしたいページのURLをコピー

手順2
記事編集画面で、リンクを設定したい文字列を選択(ドラッグ)して[リンク]ボタンをクリックします。

リンクを設定したい文字列を選択(ドラッグ)して[リンク]ボタンをクリック
ブロックエディタ「段落ブロック」の表示例

手順3
リンク先を設定するための入力欄が表示されます。ここに、手順1でコピーしたURLを貼り付けます。

手順1でコピーしたURLを貼り付け

次の手順4は、タブの開き方によって操作が異なります。

手順4-1(同じタブで開く場合)
リンク先を同じタブで開く場合は、[送信]ボタンをクリックします。これでリンクの設定が完了です。

リンク先を同じタブで開く場合は[送信]ボタンをクリック
[送信]ボタンをクリックする代わりに、[Enter]キーを押してもOKです。

手順4-2(新しいタブで開く場合)
リンク先を新しいタブで開く場合は、[新しいタブで開く]をオンにしてから[送信]ボタンをクリック(または[Enter]キーを押す)します。

リンク先を新しいタブで開く場合は[新しいタブで開く]をオンにして[送信]ボタンをクリック

以上の手順で、外部リンクを貼ることができます。

内部リンクは、記事の内容を別の記事で補足したいときや、過去記事に誘導したいときに使います。

内部リンクは、先ほどの「外部リンクの貼り方」と同じ手順で設定することができます。ですが、内部リンクを貼るときだけ使える便利な機能がありますので、その手順を紹介します。

手順1
リンクを設定したい文字列を選択(ドラッグ)して、[リンク]ボタンをクリックします。

リンクを設定したい文字列を選択(ドラッグ)して[リンク]ボタンをクリック
「外部リンクの貼り方:手順2」と同じ操作です。

手順2
リンク先を設定するための入力欄が表示されます。ここにページURLを入力してもよいのですが、内部リンクの場合はサイト内ページを検索する機能を使うことができます。
ページタイトルの一部を入力してみましょう。

内部リンク先を検索

手順3
すると、リンク先の候補が表示されます。リンク先を新しいタブで開くようにしたい場合はオンにしてから、リンクに設定したいページ名をクリックします。

内部リンクに設定したいページ名をクリック

以上の手順で、内部リンクを貼ることができます。

ボタンにリンクを貼る

ボタンにリンクを設定した例
ボタンにリンクを貼ることもできる

「ボタン」ブロック内に挿入したボタンにリンクを貼ることもできます。

手順1
ボタンブロックを新しく追加します。

「ボタン」ブロックを追加

手順2
ボタン内に文字列を入力して、[リンク]ボタンをクリックします。

ボタン内に文字列を入力し[リンク]ボタンをクリック

手順3
リンク先URLを入力して、新しいタブで開く場合はオンにしてから、[送信]ボタンをクリック(または[Enter]キーを押す)します。

リンク先URLを入力し、新しいタブで開く場合はオンにして[送信]ボタンをクリック
リンク先の設定には、「内部リンクの貼り方:手順2」で紹介したサイト内ページの検索機能を使うこともできます。

以上の手順で、ボタンにリンクを貼ることができます。


ここまでは、文字列にリンクを貼る方法を見てきました。次に、記事内の画像ファイルにリンクを設定する方法を紹介します。

画像にリンクを貼る

「画像」ブロックや「メディアと文章」ブロック内に挿入した画像ファイルには、任意のページへのリンクを貼ることができます。

手順1
画像を選択(クリック)して、[リンクを挿入]をクリックします。

画像を選択し[リンクを挿入]をクリック

手順2
リンク先URLを入力して、[適用]ボタンをクリックします。

リンク先URLを入力して、[適用]ボタンをクリック
「画像」ブロックで挿入した画像ファイルにリンクを貼る

以上の手順で、画像にリンクを貼ることができます。

画像ファイルのリンク先に「メディアファイル」や「添付ファイルのページ」を選択すると、画像リンクをクリックしたとき次のように動作します。

メディアファイル
画面上に画像ファイルのみを表示します。
添付ファイルのページ
WordPressが自動生成する「画像ファイルを説明するためのページ」を開きます。

埋め込み機能を使う

「埋め込み」とは、インターネット上に公開されている画像・動画・音声ファイルなどのコンテンツを、記事内に貼り付けて共有できる機能です。

例えば、あなたがWordPressで作成した記事内に、YouTubeで公開されている動画を埋め込んだ場合。その記事にアクセスした訪問者は、YouTube サイトに移動することなく動画を視聴することができます。

YouTube動画を埋め込みした例
YouTube動画を埋め込みした例

埋め込み機能の使い方は、とても簡単です。例として、YouTubeの動画を埋め込む手順を紹介します。

YouTubeの動画を埋め込む

手順1
埋め込みたい動画のページを開き、URLをコピーします。

動画のページを開き、URLをコピー

手順2
WordPressの記事編集画面で空っぽのブロックに手順1のURLを貼り付けるだけで、埋め込みが完了します。

空っぽのブロックにURLを貼り付け
空っぽのブロックとは、まだ何もコンテンツが挿入されていないブロックを指しています。くわしくは、新しいブロックを追加する方法をご覧ください。

空っぽだったブロックは、URLを貼り付けることで自動的に「YouTube」ブロックに変換されています。

「YouTube」ブロックに自動変換されている

YouTubeの他にも、さまざまなメディアの埋め込み機能が使えます。対応しているサービスは、[ブロックの追加][埋め込み]をクリックすると一覧表示されます。

埋め込みブロックのリスト

この一覧を確認すると、埋め込みに対応しているものの中に[WordPress]がありますね。

WordPressで作成されたページを埋め込む

WordPressで作成されたページを埋め込むと、下図のようなブログカードを表示させることができます。埋め込む方法は、先ほど紹介した「YouTubeの動画を埋め込む」手順と同じです。内部リンク・外部リンクのどちらでも埋め込むことができます。

WordPressで作成されたページのブログカードを埋め込むことができる
WordPressで作成されたページでも、利用環境等によってはブログカードの埋め込みに対応していないものもあります。

旧エディタでのリンクの貼り方

「旧エディタでのリンクの貼り方」についての説明が必要ない場合は、リンクを編集・解除する方法に進んでください。

ここまで紹介してきたリンクの貼り方は、ブロックエディタでの操作方法です。ブロックエディタとは、WordPress バージョン 5.0以降で標準となっているエディタ(記事編集画面)です。

しかし、何らかの理由で旧エディタ(WordPress バージョン 4.9以前の標準エディタ)を使っている場合もあるでしょう。

もし、WordPress本体のバージョンが5.0より古いままであれば、セキュリティ上たいへん危険です。下記ページを参考にして早急にアップデート(更新)を実施してください。事前のバックアップも忘れずに。

  1. WordPressのバックアップをかんたん確実に取る方法【初心者向け】
  2. WordPressをアップデート(更新)する

ここからは、旧エディタを使ったテキストリンクの貼り方を簡単に説明します。

旧エディタには、ビジュアルエディタとテキストエディタの2種類あります。両方とも、リンクの貼り方は基本的に同じです。異なる点は、[リンクの挿入/編集]ボタンの位置とデザインです。

ビジュアルエディタ リンク挿入・編集ボタン
ビジュアルエディタのリンクの挿入/編集ボタン
テキストエディタ リンク挿入・編集ボタン
テキストエディタのリンクの挿入/編集ボタン

ビジュアルエディタ画面を例として、リンクを挿入する手順を紹介します。

手順1
リンク先にしたいページを開き、URLをコピーします。

手順2
ビジュアルエディタで、リンクを設定したい文字列を選択(ドラッグ)して、[リンクの挿入/編集]ボタンをクリックします。

リンクを設定したい文字列を選択(ドラッグ)して、[リンクの挿入/編集]ボタンをクリック

手順3
リンク先を設定するための入力欄が表示されます。ここに、手順1でコピーしたURLを貼り付けます。

リンク先URLを貼り付け

次の手順4は、タブの開き方によって操作が異なります。

手順4-1(同じタブで開く場合)
リンク先を同じタブで開く場合は、[適用]ボタンをクリックします。これでリンクの設定が完了です。

適用ボタンをクリック

手順4-2(新しいタブで開く場合)
リンク先を新しいタブで開く場合は、[リンク設定]ボタンをクリックします。

[リンク設定]ボタンをクリック

次に、[リンクを新しいタブで開く]にチェックを入れ、更新をクリックすると、リンクの設定が完了です。

[リンクを新しいタブで開く]にチェックを入れ、更新をクリック

WordPressの記事内で設定したリンクにおいて、リンク先のURLを編集したり、リンクそのものを解除するのも簡単です。

例として、先ほど内部リンクの貼り方で設定したテキストリンクを、ブロックエディタで編集・解除してみましょう。

リンク先のURLを編集する

手順1
編集したいリンクの一部をクリックします。

編集したいテキストリンクの一部をクリック

手順2
編集をクリックします。

リンクの編集ボタンをクリック

手順3
URLを編集して、[送信]ボタンをクリックします。

URLを編集後[送信]ボタンをクリック

以上の手順で、リンク先のURLを編集することができます。

リンクを解除する

手順1
解除したいリンクの一部をクリックします。

解除したいテキストリンクの一部をクリック

手順2
[リンクを解除]をクリックします。

リンクを解除ボタンをクリック

以上の手順で、リンクを解除することができます。

記事内の特定の場所を、リンク先に設定することもできます。サンプルとして、以下にページ内リンクを貼っておきます。

ここをクリックすると、この記事の冒頭部分にジャンプします。
(ジャンプ先にある「ページ内リンクを貼る方法」と書かれたリンクをクリックすると、ここに戻ってこられます。)

ページ内リンクをスムーズにスクロールするには?

ただ残念なことに、WordPressには初心者さんでもページ内リンクを簡単に設定できる機能が備わっていません

そのため、ページ内リンクを貼るには「HTMLを編集する」という、やや難易度が高い手法を使います。

ページ内の特定場所をリンク先にする

ページ内のリンク先とする機会が多いものに「見出し」があります。今回は、見出しをリンク先としたページ内リンクを設定してみます。

そのためには、見出しに対して「目印」となる文字列を付ける必要があります。くわしく見ていきましょう。

手順1
リンク先としたい見出しブロックの[詳細設定]ボタンをクリックします。

ページ内リンク先の見出しブロック[詳細設定]ボタンをクリック

手順2
[HTMLとして編集]をクリックします。

[HTMLとして編集]をクリック

手順3

見出しブロックのHTMLコード

ここに「目印」となる文字列を付けます。今回は例として、「link」という目印を付けてみます。

h2のあとに[ id=”link”]を追加します。

h2のあとに[ id=”link”]を追加
id名(目印)を付けるときの注意点
  • id=”○○”の直前に半角スペースを入れる
  • id名には半角英数字を使う
  • id名は数字で始めない
  • 1つのページ内で、同じid名を付けられるのは1度だけ
今回は見出しレベルが「見出し2」のブロックを使用したので「h2」と表示されますが、「見出し3」の場合は「h3」が、「見出し4」の場合は「h4」が表示されます。

手順4
見出しブロックの表示を元に戻す場合は、[詳細設定]ボタン、[ビジュアル編集]の順にクリックします。

[詳細設定]ボタン、[ビジュアル編集]の順にクリック

ページ内の特定場所へのリンクを貼る

例として、「段落」ブロック内の一部の文字列にリンクを貼ってみます。

手順1
文字列を選択(ドラッグ)して、[リンク]ボタンをクリックします。

文字列を選択し[リンク]ボタンをクリック

手順2
リンク先に[#link]と入力して、[送信]ボタンをクリックします。

リンク先(#+id名)を入力後[リンク]ボタンをクリック

以上の手順で、ページ内リンクを貼ることができます。

ページ内リンク先を指定するときの注意点
  • #(ハッシュ)は半角で入力する
別ページ内の特定場所にもリンクを貼れる
手順2のリンク先に、別ページ内の特定場所(例:https://example.com/#link)を指定することもできます。
ページ内リンクの貼り方まとめ
  1. リンク先に「 id=”任意のid名”(例: id=”link”)」を付ける
  2. リンク元に「#任意のid名(例:#link)」へのリンクを貼る

ページ内リンクをスムーズにスクロールするには?

ここで再び、ページ内リンクのサンプルを載せておきます。

こちらをクリックすると、少し上に移動します。
(移動先の「ページ内リンクをスムーズにスクロールするには?」と書かれたリンクをクリックすると、ここに戻ってこられます。)

これは、WordPressの標準機能ではなく、テーマに備わっている機能です。このサイトで使っている「賢威」や、WordPress初心者さんにオススメの「ザ・トール」というテーマには、ページ内リンクをスムーズにスクロールする機能が標準装備されています。

この記事のまとめ

WordPressの記事内でリンクを貼る方法をいくつか紹介しました。投稿でも固定ページでも、同様の手順でリンクを貼ることができます。

テキスト(文字列)だけでなく、ボタンや画像ファイルにリンクを設定することも可能です。これらのリンクは、リンク先URLの編集や解除も簡単におこなうことができます。

埋め込み機能を使うと、URLを貼り付けるだけでYouTubeやTwitterなどのコンテンツを共有したり、WordPressで作成されたページのブログカードを表示させたりすることもできます。

記事内の特定の場所をリンク先に設定する(ページ内リンクを貼る)には、HTMLの編集が必要です。