WordPressリンク設定する方法をご紹介します。別のWebページに移動するためのリンクだけでなく、ページ内の特定場所に移動できるリンクも設定できます。これらのリンクは、編集や解除も簡単です。埋め込み機能を使えば、YouTubeやTwitter、他のブログ記事を共有することもできます。

ブログにも、会社やお店のホームページにも使える!
収益化に必要な機能が満載のテーマ「ACTION」はこちら!

WordPressでリンクを設定しよう

リンクは、別のWebページに移動するための仕組みとしてよく使われます。

外部サイトに移動するリンクは「外部リンク」、サイト内の別ページに移動するリンクは「内部リンク」と呼ばれます。

さらに、ページ内の任意の場所に移動することができるリンク「ページ内リンク」もあります。

WordPress講師

たとえば「目次」を設置しているWebページでは、リンクをクリックして特定場所に移動(ジャンプ)することができますね。これもページ内リンクです。

目次の作り方は、WordPressで目次を簡単に作る方法で詳しく説明しています。

上のリンクをクリックすると、各設定方法の説明に移動します。ちなみに、これらのリンクも「ページ内リンク」です。

これらのリンクをWebページ上に掲載するには、通常、HTMLという言語を使ってコードを書く必要があります。しかし、WordPressでは簡単な操作でリンクの設定が可能。初心者さんでも手軽にリンクを貼ることができます。

まず、基本的なリンクの貼り方として、記事内の一部のテキスト(文字列)にリンクを設定する方法をご紹介します。このページの後半では、ボタンや画像などにリンクを貼る方法や、YouTube動画などを埋め込む方法を説明します。

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

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

外部リンクの設定手順
  1. リンク先のURLをコピー
  2. リンクを設定したい文字列を選択
  3. URLを貼り付け

リンク先のURLをコピー

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

外部リンク先のURLをコピー

リンクを設定したい文字列を選択

投稿や固定ページの編集画面(ブロックエディタ)で、リンクを設定したい文字列を選択(ドラッグ)して[リンク]ボタンをクリックします。

ブロックエディタで外部リンクを設定したい文字列を選択

URLを貼り付け

手順1でコピーしたURLを貼り付けます。リンク先を新しいタブで開くよう設定する場合は[新しいタブで開く]をオンにしてから、[送信]ボタンをクリックします。

外部リンク先URLを貼り付け

以上の手順で、外部リンクの設定が完了します。

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

内部リンクは、先ほどの「外部リンクの貼り方」と同じ手順で設定することができますが、ここでは内部リンクを貼るときだけ使える便利な機能(サイト内ページ検索)を利用した手順を紹介します。

WordPress講師

リンク先のURLをコピペする必要がないので、さらに簡単になります。

内部リンクの設定手順
  1. リンクを設定したい文字列を選択
  2. リンク先に設定したいページを検索

リンクを設定したい文字列を選択

投稿や固定ページの編集画面(ブロックエディタ)で、リンクを設定したい文字列を選択して[リンク]ボタンをクリックします。

外部リンクの貼り方[手順2]と同じ操作です。
ブロックエディタで内部リンクを設定したい文字列を選択

リンク先に設定したいページのタイトルの一部を入力すると、リンク先の候補が表示されます。リンク先を新しいタブで開くよう設定する場合は[新しいタブで開く]をオンにしてから、リンクに設定したいページタイトルをクリックします。

内部リンク先に設定したいページを検索

以上の手順で、内部リンクの設定が完了します。

おすすめテーマ

通常のリンクをクリックするとページの先頭部分に移動しますが、ページ内の特定場所をリンク先に指定することもできます。ページ内リンクを設定するには、移動先に「目印」を付けなければなりません。

WordPress講師

目印を付ける操作はとても簡単にできるので、ご安心ください。

ページ内リンクの設定手順
  1. リンク先に目印(HTMLアンカー)を付ける
  2. リンクを設定したい文字列を選択
  3. 「#HTMLアンカーで指定した文字列」を入力

リンク先に目印(HTMLアンカー)を付ける

ページ内のリンク先に設定する機会が多いのが「見出し」です。ここでは、見出しをリンク先としたページ内リンクの設定方法を説明します。

リンク先としたい見出しブロックを選択し、[高度な設定]をクリックします。[HTML アンカー]の入力欄に任意の文字列(目印)を入力してください。下の画像では「link」としました。

見出し以外のブロックにも目印(HTMLアンカー)を付けることができます。
リンク先の見出しブロックで「HTML アンカー」を入力
HTMLアンカーは、スペースを含まない半角英数字で入力してください。

リンクを設定したい文字列を選択

投稿や固定ページの編集画面(ブロックエディタ)で、リンクを設定したい文字列を選択して[リンク]ボタンをクリックします。

外部リンクの貼り方[手順2]や、内部リンクの貼り方[手順1]と同じ操作です。
ページ内リンクを設定したい文字列を選択

「#HTMLアンカーで指定した文字列」を入力

リンク先に、

#HTMLアンカーで指定した文字列
下の画像では「#link」

を入力し、[送信]ボタンをクリックします。

「#HTMLアンカーで指定した文字列」を入力
#(ハッシュ)は、半角で入力してください。

以上の手順で、ページ内リンクの設定が完了します。

別ページ内の特定場所にもリンクを貼れる

リンク先に、別ページ内の任意の場所を指定することもできます。
たとえば、

  • ページURLが「https://example.com/post/」で、
  • HTMLアンカーに「link」を設定した場所

をリンク先とする場合には、「https://example.com/post/#link」と入力します。

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

このページ内で表示しているページ内リンクをクリックすると、いきなりジャンプせずに、スムーズなスクロールで移動すると思います。これは、WordPressの標準機能ではなく、テーマに備わっている機能です。

当サイトで使っている「賢威」というテーマには、ページ内リンクをスムーズにスクロールする機能が標準装備されています。
>> 「賢威」テーマの詳細を見る


ここまで、WordPressのブロックエディタでリンクを設定する3つの方法(外部リンク、内部リンク、ページ内リンク)について説明しました。

おすすめテーマ

WordPressのリンクを編集・解除する方法

WordPressでは、リンクの編集や解除も簡単にできます。

リンク先のURLを編集する

リンク先URLの編集手順
  1. 編集したいリンクの一部をクリック
  2. リンク先URLを変更

編集したいリンクの一部をクリック

編集したいリンクの一部をクリックして、[編集]ボタンをクリックします。

編集したいリンクの一部をクリック

リンク先URLを変更

リンク先URLを変更し、[送信]ボタンをクリックします。

リンク先URLを変更

以上の手順で、リンク先URLの編集が完了します。

リンクを解除する

編集したいリンクの一部をクリックし、[リンク解除]ボタンをクリックします。

リンクの一部をクリックしてリンク解除

以上の手順で、リンクの解除が完了します。

おすすめテーマ

その他のリンク設定方法

投稿や固定ページの編集画面(ブロックエディタ)で使えるボタンブロックにも、リンクを設定することができます。

ボタンブロックにリンクを設定できる
ボタンブロックにリンクを設定できる
ボタンリンクの設定手順
  1. ボタンブロックを追加
  2. ボタン内に文字列を入力
  3. リンク先の設定

ボタンブロックを追加

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

ボタンブロックを新しく追加

ボタン内に文字列を入力

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

ボタン内に文字列を入力

リンク先の設定

リンク先のURLを入力して、新しいタブで開くよう設定する場合は[新しいタブで開く]をオンにしてから、[送信]ボタンをクリックします。

リンク先の設定には、「内部リンクの貼り方:手順2」で紹介したサイト内ページ検索を使うこともできます。
ボタンリンク先の設定

以上の手順で、ボタンのリンク設定が完了します。

投稿や固定ページ内に挿入した画像ファイルに、リンクを貼ることができます。

画像リンクの設定手順
  1. ブロック内に画像を挿入
  2. 画像ファイルを選択
  3. リンク先の設定

ここでは、「画像ブロック」内に挿入した画像ファイルにリンクを設定する方法をご紹介します。

「メディアとテキストブロック」で挿入した画像ファイルにも、同様の手順でリンクを設定することができます。

ブロック内に画像を挿入

画像ブロックを新しく追加し、画像ファイルを挿入します。

画像ブロックを新しく追加

画像ファイルを選択

画像ファイルを選択(クリック)して、[リンクを挿入]ボタンをクリックします。

画像ファイルを選択

リンク先の設定

任意のページへのリンクを設定するには、URLを入力して[適用]ボタンをクリックします。

画像ファイルのリンク先設定
リンク先の設定には、「内部リンクの貼り方:手順2」で紹介したサイト内ページ検索を使うこともできます。

画像ファイルのリンク先には、任意のページだけでなく、「メディアファイル」や「添付ファイルのページ」を選択できます。

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

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

以上の手順で、画像のリンク設定が完了します。

おすすめテーマ

外部サービスの機能を、Webページ上で利用可能にする操作のことを「埋め込む」と言います。

たとえば、YouTubeの動画をページ内に埋め込むと、そのページの訪問者はYouTubeのサイトに移動することなく動画を視聴することができます

YouTubeやTwitterの埋め込み手順
  1. 埋め込むコンテンツのURLをコピー
  2. ブロック内にURLを貼り付け

埋め込むコンテンツのURLをコピー

埋め込みたい動画やツイートのページを開き、URLをコピーします。

埋め込むYouTube動画のURLをコピー
埋め込むツイートのURLをコピー

ブロック内にURLを貼り付け

投稿や固定ページの編集画面で新しくブロックを追加して、

YouTube、Twitterのブロックを新規追加

先ほどコピーしたURLを貼り付けて、埋め込みをクリックします。

埋め込むYouTube動画のURLを貼り付け
埋め込むツイートのURLを貼り付け

以上の手順で、埋め込み設定が完了します。

無断でアップロードされたテレビ番組等は埋め込まない
著作権を侵害している動画であることを知っていながら埋め込んだ場合、埋め込み行為そのものが著作権侵害にあたる可能性があるので注意してください。

YouTube動画を途中から再生するように埋め込む方法

YouTube動画を途中から再生するように埋め込むには、動画ページで[共有]をクリックします。

YouTube動画の[共有]をクリック
埋め込み動画の再生を開始したい地点で[共有]をクリックすると、次の手順で開始時間を入力する手間を省くことができます。

開始位置]にチェックを入れ、開始時間を入力して、[コピー]をクリックします。

開始位置を有効化してURLをコピー

あとは、「ブロック内にURLを貼り付け」と同じ手順です。

埋め込むYouTube動画のURLを貼り付け

WordPress講師

WordPressでは、「Googleマップ」や「Yahoo!地図」などのオンライン地図も簡単に埋め込むことができます。くわしくは、WordPressで地図を表示させる(Googleマップなどの埋め込み)方法をお読みください。

ブログカードを設置する

ブログカードとは、リンク先に指定した記事のタイトルや概要、アイキャッチ画像などをまとめて表示する埋め込み形式のことです。

WordPressやはてなブログで作成されたブログ記事なら、URLをコピーして「WordPressブロック」や「埋め込みブロック」に貼り付けるだけで、下のようなブログカードが自動生成されます。

ブログ初心者におすすめ!シンプル&おしゃれなWordPressテーマ

使用環境によっては、WordPressで作成された記事でもブログカードが自動生成されない場合があります。
WordPress講師

ブログカードのデザインをカスタマイズしたい場合は、Pz-LinkCardプラグインが便利です。

ここまでは、投稿や固定ページの編集画面上でリンクを設定する方法を説明しました。これらのリンクは、すべてWebページのメイン領域に表示されます。

メイン以外の領域(ヘッダー・フッター・サイドバー)にリンクを表示させたい場合は、WordPressの「メニュー」機能や「ウィジェット」機能を利用します。

WordPress超初心者講座 メニューの例
メニュー機能によるリンクの表示例

「メニュー」や「ウィジェット」によって表示できるリンクの内容や配置場所は、使用しているテーマによって異なります。基本的な使い方は、下記ページを参考にしてください。

まとめ

WordPressでリンクを設定する方法を、いくつか説明しました。いずれの方法も基本的に、

  1. リンクを貼りたい場所を選択して、
  2. リンク先を指定(URLの入力やサイト内ページ検索)する

という手順でリンクを貼ることができます。

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

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

ヘッダーやフッター、サイドバーにリンクを表示させたい場合は、「メニュー」機能や「ウィジェット」機能を利用します。