Elementor Proのリンクの動的タグの使い方

Elementor Pro『リンクの動的タグ』の使い方

こちらの記事では、ボタンウィジェットなどに付いてくる編集セクションの『リンク』の動的タグの使い方について詳しく説明していきます。
こちらは『動的タグの基本的な使い方』の記事で紹介した動的タグの使用とは異なり、とても面白い機能を持っています。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

リンクの動的タグ

リンクの動的タグ・オプション一覧

リンクの動的タグのオプション一覧

編集セクションにより動的タグで何ができるかは変わりますが、リンクの動的タグにおいてはオプションは同じです。

  • Post
    – Post Custom Field
    – Post URL
  • Archive
    – Archive URL
  • サイト
    – Site URL
    – Internal URL
    – ショートコード
  • Media
    -Featured Image Data
  • アクション
    – Author URL
  • コメント
    – Comments URL

リンクの動的タグで表示されるオプションは上記の通り6項目9種類です。
以下のセクションで、それぞれの動的タグがどのような機能を持つのかを説明していきます。

Post

リンクの動的タグのカテゴリー・ポスト

Post Custom Field

Postの『Post Custom Field』について

『Post Custom Field』(ポストカスタムフィールド)はこのElementorの編集画面外であらかじめの設定をしないと使用することはできません。

Post Custom Fieldの『Field』というのは、例えばタイトルであったり、自分の入力次第で変えられる部分のことを指します。

カスタムフィールドのフィールドとは何か

Post Custom Fieldを使用するにはカスタムフィールドの設定が必須

カスタムフィールドを有効化・画面右上のドットをクリック

Post Custom Feildを使用するにはまず『カスタムフィールド』の有効化をし、その機能を使用できる状態にしなくてはなりません。
上記画面ははElementorの編集画面に行く前の画面です。
まず、画面右上の3つのドットをクリックします。

メニューバー・設定をクリック

するとこの様にメニューバーが出てきますので、一番下の『設定』をクリックします。

追加パネル内・カスタムフィールドにチェックをし、有効化してリロードをクリック

出てきたボックス下部の追加パネル内の『カスタムフィールド』のチェックボックスにチェックを付け、『有効化してリロード』をクリックします。

カスタムフィールドを追加する

カスタムフィールドを有効化してリロードした後の表示画面・画面を下にスクロール

カスタムフィールドを有効化してリロードをすると、こちらの画面に戻りますので画面を下にスクロールします。

カスタムフィールドを追加(編集)する画面

するとこの様にカスタムフィールドの編集画面が出てきます。

カスタムフィールドで追加したい名前と値の入力

『カスタムフィールドを追加』のセクションに

  • 名前:好きな名前を入力。この『名前』というのは『値』に関連した名前にしましょう。
    注意:名前の中に _ (アンダースコア)は使用できるが – (ダッシュ)は使用できません。
  • 値 :サイトに表示させたいワードや文章などを入力します。
カスタムフィールドを追加をクリック

『カスタムフィールドを追加』をクリックします。

カスタムフィールドが追加された後の表示画面

するとこの様に、カスタムフィールドが追加されました。
この設定ができて初めてElementorの編集画面にて、動的タグの『Post Custom Feild』の使用が可能になります。

※カスタムフィールドは何個でも追加が可能です。

Post Custom Feildの使用例

ボタンウィジェットのコンテンツ編集のテキストの動的タグでPost Custon Feildの使用例

Post Custom Feildの使用例をボタンウィジェットの『テキスト』の動的タグにて説明をしたいと思います。

Post Custom Feildの設定・Keyの選択

Post Custom Feildの設定の『Key』のセクションで先ほど設定した『mushroom_name』を選択します。

Keyを選択した後のボタンのテキスト部分の変化

すると、ボタンの中のテキストが『しめじ』に変わりました。

サイト内で良く使用するワードや文章、URLなどをあらかじめ『カスタムフィールド』でいくつか設定をしておくと、動的タグのPost Custom Feildで何度でも使い回しができるということです。

今回はPost Custom Feildをテキストで説明しましたが、カスタムフィールドの値をURLで設定しているものを持っていれば、リンクの動的タグでPost Custom Fieldを使用ってボタンなどにリンクのURLを付けることが可能です。

Post URL

『Post URL』は自分のこの今編集している投稿のリンクをボタンに貼ることになります。
そもそも今現在目にしているページに、それと同じページのURLのリンクを貼ることなどまずないと思いますので、こちらははっきり言って必要のない機能です。

Archive

リンクの動的タグのカテゴリー・Archive

Archive URL

『Archive URL』リンクの動的タグとしては全く意味のないものです。
そもそもこのページはアーカイブページではありませんので、仮に設定しプレビューをしても何も起こりません。

サイト

リンクの動的タグのカテゴリー・サイト

Site URL

リンクの動的タグを『SIte URL』設定すると、自分のサイトのホーム画面にリンクさせることができます。
ただし、記事内で自分のサイトへのリンクを貼ることはまずないと思います。
こちらは存在はするけど、正直不要な機能です。

Internal URL

『Internal URL』(インターナルURL)はサイトの特定のページにリンクさせることができます。

サイトのInternal URLについて

Internal URLの設定は、全部で4つのタイプがあります。

  • コンテンツ
  • Taxonomy
  • Media
  • Author

コンテンツ

コンテンツでは、サイトの固定ページや投稿などの『ページ』へのリンクを付けることができます。

Internal URLのコンテンツについて

コンテンツを選択すると、編集セクションに更に『Search & Select』とでてきます。
テキストバーに1文字以上の文字を入力すると、

コンテンツのSearch&Select

上記画面の様に入力した文字やワードに合わせて記事が絞り込まれ、リストとして表示されます。
その中からリンクさせたい記事を選択します。

※サンプルとして『チキトシ』を選択します。

変更をプレビューをクリック

リンクの動的タグの設定の動作を確認するには画面下の『変更をプレビュー』(目のマーク)をクリックします。

プレビュー画面・ボタンをクリック

すると、この様にプレビュー画面にいきますので、『ここをクリック』のボタンをクリックしてみましょう。

ボタンをクリックした後の表示画面


するとこの様に『チキトシ』のページにリンクしたことがわかります。

Taxonomy

『Taxonomy』(タクソノミィ)は分類と言う意味です。
こちらはカテゴリー、またはタグのページへのリンクを付けることができます。

Internal URLのTaxonomyについての説明と、カテゴリー・タグページの選択

リンクを貼りたいページの選択の仕方は『コンテンツ』で紹介しているやり方と同じです。
テキストバーに文字を一文字以上入力すると、その下に予測されたカテゴリーまたはタグが表示されるのでその中からリンクさせたいものを選択します。

Media

『Media』(メディア)は画像や動画に関連したページをリンクさせることができます。

Internal URLのMediaについての説明とリンク先の選択

こちらもリンクを貼りたいページの選択の仕方は『コンテンツ』で紹介しているやり方と同じです。

Author

『Author』(オウサー)とは著者と言う意味です。
こちらでは、そのサイトのページを書いた人のことを指します。
サイトの製作者、筆者が自分一人だけならこちらはの設定はあまり意味がありませんが、複数名で制作しているサイトなどで特定のライターが書いた記事へリンクさせたい場合はこちらの機能も有効です。

Internal URLのAuthorについての説明とリンク先の選択

こちらもリンクを貼りたいページの選択の仕方は『コンテンツ』で紹介しているやり方と同じです。

Internal URLの利点・普通にリンクを貼る事との違い

Internal URLでリンクをつける利点と普通にリンクを貼ることの違い

普通に編集でリンクを貼るのと動的タグを使用しInternal URLのリンクを貼るのと一体何が違うのか?
と疑問に思った方もいたかとは思います。

Internal URLを動的タグで設定すると、例えばリンク先のURLが途中で変わっても、自動でそのリンクを見つけ出しURLをアップロードしてくれます。

例えば動的タグのリンクのカテゴリーで『きのこ』を選択していたとして、カテゴリー名が途中で『きのこ』という名前ではなくなっても、同一のものであればその記事がリンクされ続けます。

ショートコード

サイトのショートコードについて

『ショートコード』とはWordPressで複雑な計算などをし、その結果を出すものです。

ショートコードの設定・編集タブ

こちらのテキストバーにショートコードを記入します。
ショートコードで何かしら計算をし、そのリンクのURLを出せる機能です。

Media

リンクの動的タグのカテゴリー・Media

Featured Image Data

『Featured Image Data』(フューチャードイメージデータ)は、こちらのサイトで設定したアイキャッチ画像を表示させる機能です。

MediaのFeatured Image Dataのオプション一覧

上記画面の通り

  • タイトル
  • Alt
  • キャプション
  • 説明
  • File URL
  • Attachment URL

と様々なオプションがありますが、リンクの動的タグで機能する設定は

  • File URL
  • Attachment URL

の2つだけです。
それ以外のものはリンクと全く関係のないものなのでここでは機能しません。

File URL

Featured Imade DataのFile URLを設定した時の実際の画面表示

こちらはFile URLに設定し、変換プレビューをし、ボタンをクリックした後の表示画面です。
この様に画像のみが表示されました。

Attachment URL

Featured Image DataのAttachment URLを設定した時の実際の表示画面

こちらはAttachment URLに設定し、変換プレビューをし、ボタンをクリックした後の表示画面です。
この様に画像のページにリンクしました。

アクション

リンクの動的タグのカテゴリー・アクション

Popup

こちらの『Popup』はすでにサイトにポップアップを作っている状態の時のみ有効です。

アクションのPopupについて

こちらの説明は『ポップアップの基本』の記事で詳しく紹介していますのでそちらを参考にしてください。

Lightbox

アクションのLiteboxの説明

『Lightbox』では、エレメンターのポップアップ機能を使ってボタンをクリックすることにより動画または画像を表示させてくれる機能です。

サンプルとして画像を表示させてみましょう。

 Lightboxの画像を選択した時の編集タブ

『画像の選択』をクリックし、メディアライブラリまたは画像をアップロードして画像を選択します。

画像がどの様に表示されるかは、プレビューにて確認します。

ボタンをクリックすると、ポップアップと同じ様な仕様で画像が表示されたのがわかるかと思います。

Contact URL

アクションのContact URLのオプション一覧

『Contact URL』には以下のオプションがあります。

  • E-mail
  • Tel
  • SMS
  • WhatsApp
  • Skype
  • Messenger
  • Viber
  • Waze
  • Google Calendar
  • Outlook Calendar
  • Yahoo Calendear

こちらはボタンをクリックしたら、それぞれの設定したオプションの外部リンクに繋がるという訳です。

ここで全ては紹介しませんが、サンプルで『E-mai』を設定してみたいと思います。

Contact URLのE-mailの設定

『タイプ』を『E-mail』に設定すると、以下の入力項目が表示されます。

  • E-mail :接続させたいE-mailアドレスを入力します。
  • Subject :こちらの入力は任意です。
  • Message :こちらの入力は任意です。

どの様に表示されるかは、プレビューにて確認ができます。

プレビュー画面・ボタンをクリック

ボタンをクリックすると、

ボタンクリック後の表示画面・メールのコンタクトフォーム

この様に、E-mailのフォームにリンクしました。

こちらのE-mailへのリンクは、企業WEBサイトなどでメールをカスタマーサポート用とマーケティング用などと、カテゴライズし複数使い分けている企業のコンタクトページを作るときなどに使えそうな手段ですね。

Author

リンクの動的タグのカテゴリー・Author

Author URL

『Author URL』はそのサイトを作った人のURLに行くという意味です。

AuthorのAuthor URLの設定・オプション一覧

設定に

  • Author Archive
  • Author Website

と選択オプションがあります。

Author Archive

『Author Archive』は、サイトの作者のアーカイブページにリンクします。

Author Archiveを選択した時のプレビュー表示画面(サイト作者のアーカイブページ)

こちらはプレビューからボタンをクリックしてリンクしたページです。
作者のアーカイブページは、ダッシュボードの『ユーザー』の中の『プロフィール』で編集した内容と投稿ページが主に表示されます。

アーカイブページで表示される情報源・プロフィールの編集画面

※こちらはプロフィールの編集画面です。

Archive Website

『Archive Website』は、先ほどと同じプロフィールページで設定したサイトの URLにリンクします。

プロフィールの編集画面で登録したサイトURL

こちらではサイトURLを『https://test.tofu/』としました。
以下は、プレビュー画面のボタンをクリックした後の表示画面です。

Archive Websiteを選択した時のプレビュー表示画面(プロフィールで登録したサイトURLで表示される画面)

Author ArchiveとAuthor Websiteの設定は、ユーザーのプロフィールの設定と直結しているので、仮にプロフィールに設定していない箇所があれば、動的タグのリンクを『 Author』で設定しボタンをクリックしても表示されないものがあったり、何も起こらないということもあります。

コメント

リンクの動的タグのカテゴリー・コメント

Comments URL

『Comments URL』はサイトにコメント欄がある場合、コメントのあるURLにリンクします。

コメントのComment URLには詳細設定はない

こちらは特に細かい設定はありません。


リンク特有の動的タグは、中には必要としない機能もありますが、特にInternal URLやContacts URLなど、複雑なリンクとの設定も簡単に行うことが可能です。
『動的タグ』はElementor Pro特有の機能です。
より複雑で便利なサイト運用に是非活用してみてはいかがでしょうか。

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。