【WordPressのヘルプ】 リンクの設定方法は?

WordPress
スポンサーリンク

私はWordPressを利用するにあたって、エディタは「Gutenberg」、サーバーは「ConoHa」、テーマは「Cocoon」を選択しています。
この記事は、私が過去に困った際の解決方法をまとめています。
同様の条件で途方にくれている人がいましたら役に立つかもしれません。

今回は、リンクの設定方法について記述していきます。

1.初めに

この記事では、リンクの設定方法について記述しています。

上に作ってある目次のようなページ内で指定した位置に移動させる為のページ内リンクと、外部のサイトへ移動させるページ外リンクが該当しますね。

ページ内リンクとページ外リンクで微妙に設定方法が異なりますので、まずは簡単なページ外リンクの設定方法から説明していきます。

2.ページ外リンクの設定方法

まずは、リンク元を設定します
リンク元に設定したい箇所を選択し、ツールバーの「リンク(赤枠部)」アイコンをクリックします。

図1

すると、図2のようなリンク先のURLを入力する画面が出てきます。
ページ外リンクを設定する場合は、ここにURLを貼り付けてEnterマークの送信ボタンをクリックするだけでOKです
設定後にプレビューしてリンクをクリックして、外部のサイトへ移動することを確認しましょう。
また、新しいタブで開くかどうかの設定もここで同様に行えます。

図2

ちなみに、自分で作成した別の記事にリンクさせる場合も同様にURLを貼り付ければOKです。

リンク元を編集・削除したい場合は、設定した箇所を選択して下さい。
すると、図3のように編集・削除ボタンが出現します。

図3

3.ページ内リンクの設定方法

ページ内リンクは、リンク元リンク先(アンカー)を設定する必要があります。

方法はいくつかある為、順番に説明していきます。

3.1 見出しへのリンク

一般ブロックの見出しに対してリンクさせたい場合に有効な方法です
条件さえ揃っていれば一番簡単な方法です。

図4

まずは、リンク元を設定します
「2.ページ外リンクの設定方法」同様にリンク元に設定したい箇所を選択し、「リンク」アイコンをクリックし、リンク先のURLを入力する画面を開きます。
ページ外リンクの時はURLを貼り付けていましたが、ページ内リンクの場合はリンク先と結びつける為のキーワードを入力します
キーワードの設定ルールは頭に「#(半角)」を付ける以外は特にありませんが、ページ内で複数リンクを使用する場合はキーワードが被らないように注意しましょう
私は考えるのが面倒なので日付と時間を入力するようにしています。
キーワードを設定したら、Enterマークの送信ボタンをクリックしましょう。
これでリンク元は設定できました。

図5

リンク元を編集・削除したい場合は、こちらを参照して下さい。

次に、リンク先であるアンカーを設定します
リンク先に設定したい見出しブロックを選択し、右枠の設定欄を下にスクロールし、「高度な設定」を開いて下さい。
すると、図6のように「HTMLアンカー」という項目があります。

図6

ここに、先程設定したキーワードを#抜きで入力します。

以上でリンクの設定ができました。
欠点は、見出し以外にアンカーを設定できないことですが、目次からリンクを作る場合はこれで事足ります。

3.2 見出し以外へのリンク

一般ブロックの見出し以外(特定の段落等)に対してリンクさせたい場合に有効な方法です

「クラシック版の段落」を使用する必要がある為、プラグインの「TinyMCE Advanced」をインストールしましょう。

TinyMCE Advancedは、エディタの機能を拡張するプラグインです
つまり、文字を入力したりする時にできることが増える便利なツールとでも思ってもらえばOKです。
手順は以下の通りです。

WordPressの管理画面から、「プラグイン」⇒「新規追加」⇒「TinyMCE Advanced」を検索⇒「今すぐインストール」⇒「有効化」

図7

これでTinyMCE Advancedが有効になりました。

それでは、TinyMCE Advancedの設定を変更します。

TinyMCE Advancedが問題無く有効化されていれば、WordPressの管理画面の「設定」に「TinyMCE Advanced」が表示されるようになりますので、クリックします。

図8

ブロックエディタと旧エディタの設定が可能なので、ブロックエディタを選択します。
下にスクロールすると、「クラシック版の段落とクラシックブロックのツールバー」という項目があるので、ツールバーに「アンカー」を追加します。(赤枠部)
使用していないボタン欄から「アンカー」を探し、ドラッグ&ドロップして「変更を保存」をクリックして下さい。

図9

これで準備が完了しました!

それでは、リンクを作ってみましょう。

まずは、リンク元を設定します
「2.ページ外リンクの設定方法」同様にリンク元に設定したい箇所を選択し、「リンク」アイコンをクリックし、リンク先のURLを入力する画面を開きます。
ページ外リンクの時はURLを貼り付けていましたが、ページ内リンクの場合はリンク先と結びつける為のキーワードを入力します
ここまでは「3.1 見出しへのリンク」と同じですが、キーワードの設定ルールが若干異なります
頭に「#(半角)」を付けるところは変わりませんが、半角英字から始まるキーワードに設定して下さい
ページ内で複数リンクを使用する場合はキーワードが被らないようにだけ注意して、「a1」や「b2」のように適当に決めます。
キーワードを設定したら、Enterマークの送信ボタンをクリックしましょう。
これでリンク元は設定できました。

リンク元を編集・削除したい場合は、こちらを参照して下さい。

次に、リンク先であるアンカーを設定します
リンク先に設定したい段落を「クラシック版の段落」に変更します。

図10

クラシック版の段落にすると、先程設定したツールバーが表示される為、リンク先に設定したい箇所を選択し、「アンカー」アイコンをクリックします。

図11

すると、図11のようなダイアログが表示されるので、先程設定したキーワードを#抜きで入力します。

以上でリンク先であるアンカーの設定ができました。

アンカーの修正・削除をしたい場合は、図11の矢印で示したマーク(⚓)をクリックして下さい。

図12

クリックした状態でツールバーの「アンカー」アイコンを選択すると編集、Deleteキーを押すと削除ができます。

3.3 HTMLを使用したリンク

最後はHTMLでリンクを設定する方法についてです。
3.1と3.2がわかっていれば別に必要は無いですが、知識として一応載せておきます。

段落を選択した状態でツールバーの「詳細設定」ボタンから、「HTMLとして編集」をクリックします。

図13

すると、<p></p>と入力された段落が表示されます。
<p>と</p>の間に入力した文字が出力されるようになっています。

リンク元とリンク先には以下のような文字列を入力します。

リンク元
<a href=”#〇〇〇”>✕✕✕</a>

リンク先
<span id=”〇〇〇”>✕✕✕</span>

〇〇〇・・・3.1と3.2同様のキーワード 、 ✕✕✕・・・好きな文章

これだけではわかりづらいと思うので、例として実際にリンクを作ってみます。

『こちらをご覧下さい。』という文章の『こちら』をリンク元に設定してみようと思います。

①文章を入力します。

②リンク元を設定します。
キーワード(ここでは「a1」としています)を決めて〇〇〇部に入力し、『こちら』を✕✕✕部に当て嵌めます。

ここまで入力したものが実際のページでは以下のように表示されます。
『こちら』をクリックすると次の③で設定したリンク先に飛びます。

こちらをご覧下さい。

③リンク先を設定します。
先程設定したキーワードを〇〇〇部に入力し、✕✕✕部にリンク先に指定したい文字列を入力します。

リンク先の文字列は特に思い付かなかったので煽っておきました♪
↓↓↓リンク先↓↓↓

m9(^Д^)プギャー

以上、「リンクの設定方法」についてでした。

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