この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressではリンクを貼る方法が複数あります。
例えば、内部リンク・外部リンクやその他にもYouTubeを埋め込んだりと、様々なリンクの貼り方があります。
今回はWordPressのリンクの貼り方を解説していきます。
この記事を読めばリンクの貼り方が使い分けできるようになります。
それでは解説していきます。
WordPressでリンクを貼る方法
WordPressでリンクを貼る方法は、主に以下の方法です。
- 内部リンク
- 外部リンク
- ブログカード型のリンクを貼る方法
- YouTube動画・Xなどの埋め込み
- ページ内リンク
思ったより種類があると思いませんか？でも難しい操作ではなく、HTMLのコードを書くことはありません。
では、それぞれのリンクの貼り方を解説していきます。
内部リンクを貼る方法
内部リンクとは
まず、今回の記事での内部リンクとは何をさしているかというと、自分のWordPressブログの記事へのリンクのことをいいます。
例えば、「CSSアニメーションの書き方」の記事を書いていて、関連する別の記事（CSS関連）へのリンクを貼りたいときがありませんか？
そんなときには、下記のようにリンクを貼ると、他の記事もみてくれてサイトのアクセス数が増えますよね。
【CSS・gapの使い方】flexboxの余白を設定する方法の解説
内部リンクを貼る方法
では、リンクの貼り方を解説します。
まずは、WordPressの編集画面を開き、テキストを書きましょう。
次にドラッグしてテキストを選択します。
リンクボタンを選択します。
リンクボタンの場所は使用しているテーマやバージョンにより異なる場合があります。
入力欄にリンクしたいページ名を入力します。
ページ候補が複数ある場合はリンクしたいページを選択します。
外部リンクを貼る方法
外部リンクとは
外部リンクとは何をさしているかというと、自分のサイト以外へのリンクのことをいいます。
私の場合はクローバーWebのページ以外のページ（AmazonやApple公式サイト等など・・・）をさします。
外部リンクを貼る方法
では、リンクの貼り方を解説します。
WordPress編集前にリンクを貼るURLをコピーしておきます。
まずは、WordPressの編集画面を開き、テキストを書きましょう。
次にドラッグしてテキストを選択します。
リンクボタンを選択します。
リンクボタンの場所は使用しているテーマやバージョンにより異なる場合があります。
URLを入力欄にペーストします。
リンクを別タブで開くように設定したい場合は、テキストを選択しなおしてから、新しいタブで開くにチェックを入れます。
ブログカード型のリンクを貼る方法
ブログカード型リンクとは
ブログカード型リンクとは、アイキャッチ画像・タイトルなどが一体型になっているリンクのことです。
プラグインなしでは、外部リンクはブログカード型のリンクは対応していませんので、内部リンクのみ設定可能です。
ブログカード型のリンクを貼る方法
では、リンクの貼り方を解説します。
入力欄に埋め込みと入力します。
入力欄に事前にコピーしたURLをペーストします。
YouTube動画・Xなどを埋め込む方法
YouTube動画やXのポストを埋め込むこともできます。
YouTube動画・Xなどを埋め込むとは
ブログなどで以下のようなリンクをみたことがあるかと思います。
ちなみにYouTube動画は私の好きな釣り系YouTuberの動画です。
Xは以下のようなリンクです。
YouTube動画・Xなどを埋め込む方法
では、埋め込み方を解説します。
ブログカード型リンクと同じ方法です。
YouTubeやXを開きURLをコピーしておきます。
入力欄に埋め込みと入力します。
入力欄に事前にコピーしたURLをペーストします。画像のURLはYouTubeのURLではありませんがご了承ください。
埋め込みボタンを選択する
ページ内リンクを貼る方法
ページ内リンクとは
ページ内リンクとは、同じページ内の別の場所に移動できるリンクのことです。
具体的には、ページ下部にある△ボタンのようなリンクをいいます。ボタンを選択すると、目次にとぶようになっています。
ページ内リンクを貼る方法
では、リンクの貼り方を解説します。
リンクしたいブロックを選択します。
先ほど上記で説明した例では、目次ブロックのことです。
ここでは見出しブロックを選択します。
入力する文字には以下のような注意点があります。
- ページ内に同じ文字のHTMLアンカーは設定できません。（一意の必要があります）
- 大文字と小文字が区別されます。
- ハイフン (-)、アンダースコア (_)、コロン (:)、ピリオド (.) の記号を含めることができますが、スペースを含めることはできません。
- HTML アンカーはアルファベットで始まる必要があります。（数字や記号から始まってはいけません)
https://wordpress.org/documentation/article/page-jumps/ 引用元
先ほど設定したHTMLアンカーの頭に#をつけて入力します。
別ページのHTMLアンカーを設定したい場合は、上記の「STEP.3HTMLアンカー」を入力するURLを以下のように設定します。
https://clover-weblog.com/gap/#i-0HTMLアンカーの前に#とURLを追記して設定します。例えば以下のように設定します。
【CSS・gapの使い方】flexboxの余白を設定する方法の解説
リンクを削除する方法
リンクを削除する方法を解説します。
リンクボタンを選択するとリンクが削除されます。
リンクのURLを変更する方法
一度設定したリンクのURLを変更する方法を解説します。
おすすめ書籍
WordPressをもっと勉強したいという方におすすめの書籍を紹介します。
 |
こちらの書籍はオリジナルテーマを作ってみたいという方におすすめの書籍です。
サンプルサイトを作成しながら勉強できますので、作りながら学びたい方にぴったりです。
 |
テンプレートタグを理解したければこの書籍をおすすめします。
概念から説明してくれますので、こちらもおすすめです。
 |
標準デザインシリーズのWordPress版です。
標準デザインシリーズはとてもわかりやすいので、HTML＆CSS版もおすすめします。
HTMLの勉強のときからお世話になっています。
まとめ
- WordPressでリンクを貼る方法は主に以下のような貼り方があります。
- 内部リンク
- 外部リンク
- ブログカード型のリンクを貼る方法
- YouTube動画・Xなどの埋め込み
- ページ内リンク
いかがでしたでしょうか。
今回はWordPressのリンクの貼り方を解説しました。
皆さんもよいWordPressライフを^^/~
