こんにちは、masashiです
今回はWordPressでページ内の任意の場所に移動できるリンクを作る2つの方法をご紹介します
・ページ内の任意の場所に移動するリンクを作りたい人
・一部の人を除いて、飛ばして読んでほしい部分がページ内にある人
・ブログ記事を見やすく改善したい人
今回利用する方法は
- プラグイン「Advanced Editor Tools （元TinyMCE Advanced）」を利用してリンクを作る方法
- コードエディターを利用してリンクを作る方法
この2つです
どちらも非常に簡単なので、好きな方法で試してみて下さい！
また、別ページの任意の場所まで移動する方法も併せてご紹介するので参考にして下さい
プラグイン「Advanced Editor Tools」を利用してリンクを作成する方法
Advanced Editor Toolsは、WordPressの記事を書く際のエディタツールをカスタマイズするためのプラグインです
※以前はTinyMCE Advancedという名称でしたが、バージョンアップに伴い名称を変更しています
Advanced Editor Toolsのインストール・有効化
①ダッシュボードの左サイドメニューの「プラグイン」から「新規追加」をクリック
②右上のフォームで「Advanced Editor Tools」と入力し検索
③表示されたプラグインの中からAdvanced Editor Tools (previously TinyMCE Advanced)を探し、「今すぐインストール」をクリック
④そのまま待つと５～１０秒ほどでインストールが終わるので、「有効化（Activate）」をクリック
⑤「プラグインを有効化しました」の表示を確認し、インストール・有効化完了です
Advanced Editor Toolsの設定方法【3ステップ】
①ダッシュボードの左サイドメニューの「設定」から「Advanced Editor Tools」をクリックします
ここで、ページ内でリンクを動作させるためのボタンをブロックエディターに追加します
②下にスクロールし「クラシック版の段落とクラシックブロックのツールバー用の使用していないボタン」グループから「アンカー」をクリックし、エディターメニューの任意の位置へドラッグ＆ドロップで移動させます
③エディターメニューにアンカーを表すリボンのアイコンが追加されていることを確認し、「変更を保存」で設定完了です
リンク先の設定
まずは、ジャンプさせたいゴール地点を決め、リンク先に設定していきます
今回はこちらからリンク元の設定末尾「ゴール」に飛ぶリンクを作っていきます
①リンク先に指定したい文字列をドラッグする
②メニューにあるリボンのアイコン（アンカー）をクリック
③IDを入力するフォームが開くので、任意の英数字を入力（覚えやすいものなら何でもいいです）
④「OK」をクリックし、選択した文字列の先頭に船のいかりのマークがついたら、リンク先の設定は完了です
※IDとして入力した文字は、リンク元の設定をする際に必要になるので覚えておきましょう
※ページ内に複数のリンク先を設定する場合、すべて異なる英数字に設定する必要があります
リンク元の設定
リンク先の設定が終わったら、スタート地点を決めてリンク先と関連付けていきます
①リンク元に指定したい文字列をドラッグする
②メニューにある「リンクの挿入/編集」ボタンをクリック
③リンク先を入力できるフォームが開くので、リンク先のIDに設定した英数字の先頭に、半角の「#」をつけて入力します
④「Enter」か「適用」ボタンを押して設定完了です
これで、記事内の任意の場所へ移動するリンクが作成できました
コードエディターを利用してリンクを作成する方法
Advanced Editor Toolsを利用しなくとも、コードエディターを使うことでもページ内リンクは簡単に作成することが出来ます
①投稿の編集画面から、コードエディターを起動します
②リンク元に設定したい箇所に以下コードを追加
<a href="#任意の英数字">リンク元文字列</a>
③リンク先に設定したい箇所に以下コードを追加
<a id="任意の英数字">リンク先文字列</a>
これだけで作業は完了です
おまけ：見出しをリンク先に設定する場合
・「h2･h3･h4」等見出しタグの間に入力しましょう
<h2><a id="任意の英数字">リンク先見出し文字列</a><h2>
コードをうつのが面倒な方はプラグインを入れたほうが早いですし、余裕な方はコードエディターでの作成をお勧めします
別記事の任意の場所にリンクさせる方法
ここまでに説明したリンク設定は、別ページにリンクさせることも可能です
別記事の途中に伝えたいテーマがある場合などに活用できると非常に有用ですね
設定方法は簡単で、これまで説明した方法にひと手間加えるだけ
①リンク先は、別ページの移動したい文字列にこれまで同様に任意のIDを設定
②リンク元は、「#」の前に移動したい別ページのURLを入力してください
Advanced Editor Toolsの場合：
コードエディターの場合：<a id="別ページのURL#任意の英数字">リンク元文字列</a>
例：WordPressの投稿記事をワンクリックで複製して、コピーを一瞬で作成してくれるプラグイン、Yoast Duplicate Post
リンク先を設定する際の注意点（主に見出しリンク）
WordPressではプラグインやテーマの設定によって、見出しに設定した文字列から自動的に目次を作ってくれる機能が有効になっています
この機能が有効になっていると、目次を作る際に自動的にIDが見出しに設定される可能性があり、リンク先に任意で設定したIDが無効になることがあります
その場合、移動したい見出しの前後にコードを挿入する等して対応しましょう
自動的に設定されるIDを調べ、リンクを設定したい場合は
①目次が表示されているページを開く
②目次でリンク先に設定したい見出しをクリック
③見出しに移動した状態で、ページのURL末尾を見る
すると、「#toc3」のように「#英数字」となっています
その英数字がIDに当たる部分なので、引用して利用しましょう
まとめ
今回は、WordPressでページ内の任意の場所に移動できるリンクを作る2つの方法をご紹介しました
この機能を使うことでより見やすい記事が作成できると思うので、ぜひ活用して下さい！
コメント