リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込み

WordPressリンクを貼る方法をご紹介します。別のWebページに移動するためのリンクだけでなく、ページ内の特定場所に移動できるリンクの貼り方も説明しています。埋め込み機能を使えば、YouTubeやTwitter、他のブログ記事を共有することもできます。

目次

WordPressでリンクを設定しよう

リンクは、Webページ間を移動するための仕組みです。リンクを設定するための基本的な方法には、次の3つがあります。

外部リンク

外部サイトに移動するリンク

内部リンク

サイト内の別ページに移動するリンク

ページ内リンク

ページ内の任意の場所に移動するリンク

上の3つリンクをクリックすると、それぞれのリンク設定方法の説明に移動します。
ちなみに、上の3つのリンクは「ページ内リンク」です。


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

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

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

外部リンクを設定するときは、信頼できるサイトをリンク先に指定することが大切です。

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

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

外部リンク先のURLをコピー
STEP
リンクを設定したい文字列を選択

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

外部リンクを設定したい文字列を選択
STEP
URLを貼り付け

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

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

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

内部リンクは、記事の内容を別のページで補足したいときや、ランディングページ(LP)に誘導したいときなどに設定します。

ランディングページとは?
サイト訪問者のアクション(商品の購入、サービスの申込、問い合わせなど)を促すためのページのことです。

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

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

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

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

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

外部リンクの貼り方[STEP2]と同じ操作です。

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

リンク先に設定したいページのタイトルの一部を入力すると、リンク先の候補が表示されます。リンク先に設定したいページタイトルをクリックします。

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

リンク先を新しいタブで開くようにする場合は、[新しいタブで開く]をオンにしてからページタイトルをクリックしてください。

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

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

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

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

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

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

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

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

HTMLアンカーは、スペースを含まない半角英数字で入力してください。

見出し以外のブロックにも目印(HTMLアンカー)を付けることができます。

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

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

ページ内リンクを設定したい文字列を選択

外部リンクの貼り方[STEP2]や、内部リンクの貼り方[STEP1]と同じ操作です。

STEP
リンク先に「# + HTMLアンカー」を入力

リンク先に、以下の文字列を入力し、[送信]ボタンをクリックします(または[Enter]を押します)。

「# 」+ 「HTMLアンカーに入力した文字列」
 例:#link

ページ内リンク先に「# + HTMLアンカー」を入力

#(ハッシュ)は、半角で入力してください。

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

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

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

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

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

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

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

このサイトで使っているテーマ「SWELL」にも、ページ内リンクをスムーズにスクロールする機能が備わっています。

>> SWELLの特徴を見てみる

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

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

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

リンクの文字列やURLを編集する

リンクの編集手順
  1. 編集したいリンクの一部をクリック
  2. リンクの文字列やURLを変更
STEP
編集したいリンクの一部をクリック

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

URLを編集したいリンクの一部をクリック
STEP
リンクの文字列やURLを変更

リンクの文字列やURLを変更し、[送信]ボタンをクリックします(または[Enter]を押します)。

リンクの文字列やURLを変更し[送信]ボタンをクリック

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

リンクを解除する

解除したいリンクの一部をクリックし、[リンク解除]アイコンをクリックします。

リンクの一部をクリックし[リンク解除]アイコンをクリック

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

その他のリンク設定方法

ここまでは、ページ内のテキストにリンクを設定する方法について紹介しました。テキストリンク以外にも、次のように特殊なリンクを設定することができます。

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

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

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

ボタンブロックを追加
STEP
ボタン内に文字列を入力

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

ボタン内に文字列を入力し[リンク]ボタンをクリック
STEP
リンク先の設定

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

ボタンブロックのリンク先の設定

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

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

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

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

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

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

STEP
ブロック内に画像を挿入

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

ブロック内に画像を挿入
STEP
画像ファイルを選択

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

画像ファイルを選択し[リンクを挿入]ボタンをクリック
STEP
リンク先の設定

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

リンク先の設定し[適用]ボタンをクリック

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

画像ファイルのリンク先について

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

メディアファイル

画面上に画像ファイルのみを表示する

添付ファイルのページ

画像ファイルを説明するためのページを開く
※ページは、WordPressによって自動生成されます。

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

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

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

YouTubeやTwitterの埋め込み手順
  1. 埋め込むコンテンツのURLをコピー
  2. ブロックの新規追加
  3. URLを貼り付け
STEP
埋め込むコンテンツのURLをコピー

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

埋め込むYou Tube動画のURLをコピー
埋め込むツイートのURLをコピー
STEP
ブロックの新規追加

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

埋め込みブロックを追加
STEP
URLを貼り付け

STEP1でコピーしたURLを貼り付けて、[埋め込み]をクリックします。

You Tube動画のURLを貼り付け[埋め込み]をクリック
ツイートのURLを貼り付け[埋め込み]をクリック

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

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

YouTubeの開始位置を指定して埋め込む手順
  1. 動画ページで[共有]をクリック
  2. 開始時間を入力してURLをコピー
  3. YouTubeブロックにURLを貼り付け
STEP
動画ページで[共有]をクリック

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

YouTube動画ページで[共有]をクリック

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

STEP
開始時間を入力してURLをコピー

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

開始位置を有効化してURLをコピー
STEP
YouTubeブロックにURLを貼り付け

YouTubeブロックを追加して、URLを貼り付け、[埋め込み]をクリックします。手順は、YouTubeやTwitterを埋め込むで紹介したものと同じです。


地図の埋め込みもできる

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

ブログカードを設置する

ブログカードとは、リンク先の情報(ページタイトル、概要、アイキャッチ画像など)をまとめて表示する埋め込み形式のことです。

WordPressで作成された記事なら、URLをコピーして「WordPressブロック」や「埋め込みブロック」に貼り付けるだけで、ブログカードが自動生成されます。どんなデザインで表示されるかは、使用するテーマによって異なります。

このサイトで使っているテーマ「SWELL」の場合は、以下のようなデザインのブログカードが表示されます。

あわせて読みたい
【WordPress初心者向け】おすすめのWordPressテーマ9選 おすすめのWordPressテーマを紹介します。また、新しいテーマに変更する前に知っておきたい初心者向けの予備知識や、後悔しないWordPressテーマの選び方も解説していま...
テーマ「SWELL」が生成する内部リンクのブログカード
日本語
WordPress 6.0 「アルトゥーロ」 以下の内容は WordPress.org 公式ブログの記事「WordPress 6.0 “Arturo”」を日…
テーマ「SWELL」が生成する外部リンクのブログカード

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

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

メインコンテンツではない領域(ヘッダー、フッター、サイドバー)にリンクを表示させたい場合は、以下のWordPress標準機能が便利です。

  • 「メニュー」機能
  • 「ウィジェット」機能
グローバルメニューの表示例
グローバルメニューの表示例

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

まとめ

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

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

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

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

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

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

  • URLをコピーしました!

このサイトで使っているテーマ

多彩なブロックが使えるから
サクサク記事を書けるテーマ
センス不要!
シンプルで美しいサイトを簡単に作れます

くわしい設定マニュアルが用意されているので、初心者でも安心して使えます

目次