初心者の為のWEB開発

WordPressを使ったリンクの貼り方は?外部・内部リンクの設定方法

※当サイトはPR(プロモーション)を含みます。

WordPress リンクの貼り方は?外部・内部リンクの設定方法 初心者の為のWEB開発

【今回のテーマ】

WordPressでサイトを開設したんだけど、リンクってどうやって貼ればいいの?

今回はWordPress初心者のために、外部・内部リンクの貼り方や応用した使い方を紹介したいと思います。

リンクの貼り方は簡単ではあるんですが、全く知識のない方の場合多少躓く要因にもなるんですよね。

特にサイトの順位に関わるSEO対策として重要な内部リンク!

貼り方はもちろん、この点についてはどういう時に貼っていくのかというところを解説します。

【こんな方におすすめの記事】
  • WordPress初心者
  • リンクの貼り方・編集・削除の仕方が知りたい方
  • リンク貼り方の応用

WordPressでリンクの貼り方がわからず悩んでいる方は是非目を通してみてください。

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

WordPress「リンクの貼り方」

一口にリンクの貼り方と言っても、実はWordPressでのやり方は1つではありません。

通常HTMLでリンクを貼るには「linkタグ」に記述が必要ですが、WordPressはコードを触る必要がない代わりに記事作成画面からできる2つの方法があります。

【リンクを貼る2つの方法】

  • テキストにツールバーから設定
  • テキストにコピーしたリンクを貼り付け

下記で紹介する方法は「テキストだけ」ではなく、画像にも同じように設定できます。テキストを使った方法を解説しますが、同じやり方で画像にもできるので試してみてください。

①テキストにツールバーから設定

WordPressの記事作成画面にあるツールバーを使用してリンクを貼ることができます。

【ツールバーから設定する手順】
  • 手順1
    【手順①】文面を用意。

    任意の記事を作成し、リンクを貼りたいテキストを用意

  • 手順2
    【手順②】リンク範囲を指定

    書いたテキスト文の中から or あるいはすべての文面を選択。

  • 手順3
    【手順③】ツールバーからリンクツールを選択。

    ツールバーの中からリンクのアイコンを選択し、URLを入力。

    ※入力後「Enter」マークを押さないと反映されないので必ず押してください。

  • 手順4
    【手順④】記事の「更新」or「公開」して反映確認

    URLを入力後、作成した記事ページを「更新」or「公開」して実際に反映できているか確認。

    ※↑画像ではリンク表示としてアンダーラインがついていますが、これはテーマの仕様。実際は青文字だったり赤文字だったり、お使いのテーマに依存します。リンクがついてればOK!

②テキストにコピーしたリンクを貼り付け

WordPressの記事作成画面では、ショートカットキーを使いテキストにリンクを貼り付けることができます。

【ツールバーから設定する手順】
  • 手順1
    【手順①】文面を用意。

    任意の記事を作成し、リンクを貼りたい文面を用意。

  • 手順2
    ここまでは同じ→【手順②】リンク範囲を指定

    書いたテキスト文の中から、あるいはすべての文面を選択。

  • 手順3
    【手順③】選択したテキストにURLを貼り付け

    コピーしたURLを選択したテキストに直接貼り付けます。これは上書きも可能!

    貼り付けショートカットキー

    Windows:Ctrl+V
    MAC:Cmd+V

WordPressで使うリンクの種類

リンクと一口に言っても、WordPressでは複数のリンクを使い分け使用します。

【リンクの種類】

特に「内部リンク」と「外部リンク」は当たり前のように使うので、それぞれの違いを簡単にまとめてみます。

内部リンクとは、自身のWEBサイトで作成したコンテンツ(記事)同士をリンクで繋ぐこと。

コンテンツ同士を繋げることで、関連した記事の内容に誘導することができ、サイト内の回遊率をアップさせることができるのが1番のメリット。

回遊率はサイトの活性化のために非常に重要なポイントで、ちゃんとリンク先の設計ができると「収益」をアップさせることにも繋がります。

特に特化サイトは設計がしやすいですね。
雑記サイトはやや難しく、管理や工数に時間がかかるので収益化を重要視するなら特化したサイト運用がおすすめ。

貼り方は「WordPressでリンクの貼り方」で説明した通りテキストを選択して繋げたい記事のURLを貼り付けるだけ。

内部リンクを貼る場合、「アンカーテキスト」と呼ばれる「リンク先の情報内容がわかるテキスト」を作るのがおすすめ。

サイト内からサイト外にリンクを繋ぐ方法。

外部リンクは自身のサイトコンテンツから外部のサイトへリンクする方法を指します。

HTMLでは「aタグ」などを使用し、必要な属性などを指定する必要があり初心者にはかなり面倒。WordPressでは内部リンク同様の貼り付け方で可能。

1点だけ考慮してほしいのは「ユーザー行動」。

WordPressで外部リンクを設定する場合、

  • 「新しいタブで開く」
  • 「ページ遷移(今いるページから移動)」

この2つを選択することになると思います。

どちらがいいか・・・正直明確にその答えはありません!

少し前までは「新しいタブで開く」がベストとされていたようですが、現在ではスマホ利用者の増加とユーザー行動の変化によって少し状況が変わってきていますね。

「自分でスマホを使う場合どう行動するのか?」を考えてみて決定するといいかなと思います。

画像の通り「新しいタブで開く」を設定する場合は、リンクは貼り付けた際に表示される設定の赤点部分にチェックを入れてください。

ページ内リンクとは、固有id(#)を利用した「ページ内を移動するリンク」のことです。

「記事の目次」のような見たいコンテンツへ一瞬で移動するためによく使われるリンク設定。

ページのボリュームが多くなりすぎると、見たいコンテンツを見るまでにスクロールの数が増え、ユーザーの離脱に繋がることも珍しくありません。

ユーザーの使いやすい設計にするために取り入れられるリンクの使い方ですね。

【ページ内スクロールの設定手順】
  • 手順1
    【手順①】移動先のブロックにアンカーを設定する

    まずは飛び先の設定。
    リンクを踏んだ時、作成したコンテンツのどこに移動させたいのか、ブロックに「HTMLアンカー」を設定します。

    【やること】

    • 移動先のブロックを選択
    • 「高度な設定」から「HTMLアンカー」を入力

    ブロックエディタの「高度な設定」から「HTMLアンカー」を設定します。

  • 手順2
    【手順②】移動するためのリンクテキストを用意

    「手順1」で設定したブロックへ移動するためのリンクをテキストに貼り付けます。役割はボタンみたいなものですね。

    【やること】

    • テキストを選択
    • ツールバーからリンクアイコンをクリック
    • URL入力欄に移動したいブロックにつけた「HTMLアンカー」に「#」を加えて決定

    入力例「#test-anchor」(※「#」は半角で入力してください。)

  • 手順3
    【手順③】反映確認

    保存したら実際に反映されているか確認して完了。

指定ページのページ内リンク先に遷移させる方法

通常リンクの貼り方とページ内リンクを合わせた応用方法ですね。

メリット
デメリット
  • 特定の1部コンテンツに遷移させるので、まとめページなどに設定すると使い勝手がいい
  • 回遊率があがる
  • Googleにインデックスされてしまうので、使わなくなった場合、知らない内にインデックスされた不要なリンクが増えていく可能性がある

↑メリット・デメリットでもまとめた通り、紹介する方法は頻繁に使うには少々おすすめはできません。低品質のリンクがたくさんインデックスされてしまうと、サイト全体に影響がでるかもしれないから。

デメリットを踏まえて、ちょっと初心者向けではありませんが、難しくはないので必要な時に試してみてください。

【ページ遷移+ページ内移動の設定手順】
  • 手順1
    【手順①】遷移先ページの移動したいブロックにHTMLアンカーを設置

    「遷移先のページ」とその「ページ内移動したいコンテンツ(ブロック)」を用意。

    テストとして、「ページ遷移+ページ内スクロールテストページ」を作り、その中のブコンテンツである「ブロック6」へ移動させる想定で書いてみます。

    【やること】

    • ブロックを選択
    • 「高度な設定」から「HTMLアンカー」を入力
  • 手順2
    【手順②】移動するリンクにURLを設定する

    遷移前のページに「ページ移動+ページ内移動(ボタン)」を設定

    【やること】

    • 遷移前のページからテキストを選択
    • ツールバーからリンクアイコンをクリック
    • URL入力欄に「移動したいページ」+「ブロックにつけたblock6」に「#」を加えて決定

    ↑画像に設定したURLはこんな感じ↓要はフルパスにアンカーを足すだけ!

    「http://test.local/2023/12/30/hello/#block6」

    ↑テストリンクはローカル環境URLなので遷移しません。記述例として実際に使うものに当てはめて書いてみてね。

  • 手順3
    【手順③】反映確認

    保存したら実際に反映されているかリンクをクリック、確認できたら完了。

注意点として画像がたくさんあるページの場合、「画像の遅延読み込み処理」をやっていないと「レイアウトシフト」を起こし、高さの数値が変わって指定の場所へ遷移できなくなることがあります。

つまり、設定した画像が表示されないと、全体の高さが変わって移動させたい場所がズレるということ。

昨今のブラウザやWordPressだと問題ないものも多いですが、1部まだ未対応のテーマなどもあるはずなので、位置がズレる場合は可能性が高いです。

>>初心者のテーマ選びの参考におすすめの有料・無料テーマそれぞれ3選を紹介

ファイルにリンクを設定する方法

飛び先リンクの設定は、実はWEBページに限定されるものではなく「ファイル」に対してリンクを貼ることもできます。

例えば↓このような画像をサーバーにアップしたとします。

画像リンク:↑テスト画像が開きます

この画像は自身の使っているサーバー上にアップされるので、ドメインからファイル名の拡張子まで指定してあげることでブラウザでファイルを開くことができます。

これは「png」・「jpg」・「PDF」に限らず、使ってる端末で開ける環境なら全て開くことができ、もちろんダウンロードも可能。

では、どういう風に使うのか?
下記に1例を書くので、興味がある方は調べてみてね!

【使い方1例】

  • モーダルウィンドウ
  • PDFファイルなど資料のダウンロード用
  • エクセルファイルなどの配布用

※本サイトは仕様上モーダルウィンドウになってわかりづらいですが、URLを直接ブラウザに入力して飛んでみるとわかると思います。

貼り付けたリンクを編集・削除する方法

ここまで「リンクの貼り方」・「リンクの種類」・「ファイルへの貼り方」などをまとめてきましが、リンクは「削除」したいこともあれば「編集したい」場面も必ず出てきます。

編集・削除する方法もWordPressならめちゃくちゃ簡単。

下記で詳しく解説。

リンクを編集する方法

やり方は超簡単!

【リンクの編集方法】
  • 手順1
    【手順①】リンクのついたテキストを選択

    すでにリンクがついているテキストの範囲を選択します。

  • 手順2
    手順②】表示されたツールから編集

    テキストを選択するとツールが表示され、「新しいタブで開く」や「編集」などが表示されるので編集を選択

  • 手順3
    【手順③】編集する

    テキストとリンクに分けて編集を選ぶことができます。

    修正後は「保存」を必ず押してページの更新を行なってください。

    以上

リンクを削除する方法

削除はさらに簡単!

【リンク削除の方法】
  • 手順1
    【手順①】リンクのついたテキストを選択

    すでにリンクがついているテキストの範囲を選択します。

  • 手順2
    手順②】表示されたツールから編集

    ツールバーからアクティブになっているリンクアイコンをクリック。

これだけ!

「太字」なども同様にアクティブになっているツールを再度押すと無効にすることができます。

WordPressのリンクを「カード型」にする方法

WordPressでブログなどを見ていると「カード型」のリンクを使っているのを見かけたことがあると思います。

カード型にできるのか?結論は↓こんな感じ

  • 標準実装で出来るテーマと出来ないテーマがある
  • できないテーマはプラグインを導入するか自分で実装する

基本的にはこんな感じ。

今だと標準実装されているテーマも多いですが、できない場合はプラグイン「Pz-LinkCard」を使うのがもっとも簡単な方法。

自身での実装は知識が必要なので、初心者さんにはおすすめできません。

テーマで対応している(Cocoonの場合)

無料テーマで有名なCocoonを例に出します。
Cocoonのカスタムブロックには「ブログカード」が実装されています。

これを選択すると↓下記のようなフィールドが表示されます。

そこにURLを入力すると↓このように表示されます!

Cocoonを使ったホームページ例とスキンを使うポイントを紹介!

プラグインで対応する(Pz-LinkCard場合)

プラグイン「Pz-LinkCard」を使う場合はWordPressの管理画面左側メニューのプラグインから「新規プラグインを追加」で検索かけると出てきます。

プラグインの導入方法は↓記事で詳しくまとめたので参考にどぞ!

【簡単プラグインの入れ方】ワードプレスを機能拡張するメリットと注意点

「Pz-LinkCard」は「クラシックエディタ」と「ブロックエディタ」両方に対応していますが、「ブロックエディタ」の方は正直ちょっと面倒。

というのも、呼び出すボタンがブロックエディタに表示されないので、直接↓下記ショートコードを入力する必要があります。

[blogcard url="リンク先URL"]

どこかにメモっておくのも面倒という方は、そもそも使い勝手のいいテーマに変更した方がいいかもしれません。

ちなみに、この「カード型」とamazonや楽天のボタンが付いたカード型は別機能になるので、混同しないように注意。

>>WordPress初心者なら有料テーマを使え!おすすめ3選と選び方

WordPressの「リンクの貼り方」・「外部・内部リンク」【まとめ】

以上リンクの貼り方についてまとめてきました!

「貼り方」や「編集・削除のやり方」などは特に難しいものではないと思います!

今回紹介した中で、ぼくが最も重要視していたのは「内部リンク」。

外部リンクでもリンクの貼りすぎや貼るサイトなど気を付けたいところはお伝えしたいんですが、内部リンクはこれからサイトを運用していくにあたり、めちゃんこ大事な要素。

記事のクオリティにもよりますが、適切に設定できればSEO対策としての効果を体感できるはず。

  • 関連性のある記事同士をつなぐ
  • アンカーテキストにキーワードを使う
  • 記事の補足記事でサポートする

↑特にこれらは内部リンクに重要なるので、読者の行動を考えて記事設計をしてみてください。

また、設計以前に使いにくいテーマを使っている方は・・・1度優秀なテーマを導入するのを検討した方がいいかもしれないですね。はじめたばかりの方は後に変更は面倒になるので早い段階がおすすめ。

ぼくは何度か記事で書いてるんですが、経験的に初心者に無料テーマは結構シンドイ場面が出てくるのでおすすめしていません。

初期投資だと思ってケチらず使いやすいテーマを使った方が良いと思います!

ファズ
ファズ

今回はここまで!

ありがとうございましたっ

コメント

タイトルとURLをコピーしました