WordPress

WordPressでページ内リンクのためにページビルダーで作ったROWにIDを設定する方法

テーマSydneyを使ってトップページのビジュアルの行動喚起ボタンをクリックで同じページの最新記事にリンクするようにしています。先日、最新記事欄を上の方に移動したらSydneyが設定しているIDの番号がずれてしまったため(上のセクションから0,1,2…と付与しているため)、行動喚起ボタンのURLを書き換えたのですが、そもそも自動で採番しているIDを使わないで自分でIDを付与すればよいことに気付いた次第。というか、ページビルダーの開発元であるSiteOriginのブログ(Adding Row ID’sのあたり)をみたら気付いたのですが( https://siteorigin.com/one-page-navigation-with-page-builder-corp/ )。

(2018/12/14追記)

テーマSydneyが推奨するプラグインは記事作成時のものとなります。2018年12月現在、Sydneyが推奨するページビルダーはElementorですが、当サイトでは以前推奨されていたPage Builder by SiteOriginを使っています。

1.リンク先のセクションの行を編集

スパナアイコンにマウスをかざして行の編集をクリックします
ページビルダーで作ったROWにIDを設定する手順

2.行の属性にIDを設定

Row編集画面の行のスタイルより「属性」をクリックします
ページビルダーで作ったROWにIDを設定する手順

属性が開きます
ページビルダーで作ったROWにIDを設定する手順

Row IDに任意のID名(ここではnews-section)を設定して、終了ボタンをクリックします
ページビルダーで作ったROWにIDを設定する手順

3.ブラウザで指定したID名が設定されていることを確認

ブラウザのデベロッパーツールより、指定したID名が設定されていることを確認します
ページビルダーで作ったROWにIDを設定する手順

4.Sydneyトップページの行動喚起ボタンのURLを変更

外観>カスタマイズよりヘッダーエリアを選択します
ページビルダーで作ったROWにIDを設定する手順

行動喚起ボタンのURLには、Sydneyが設定したIDが設定されています
ページビルダーで作ったROWにIDを設定する手順

行動喚起ボタンのURLに上記2で設定したIDを設定します
ページビルダーで作ったROWにIDを設定する手順

ブラウザでトップページを再読み込みすると、行動喚起ボタンのリンクがnews-sectionに変わっていることが確認できました。
ページビルダーで作ったROWにIDを設定し、変更されたことを確認

このやり方だと、仮にトップページのコンテンツが増えて最新記事欄の位置が変更されても、news-sectionのIDへのリンクなので、一々行動喚起ボタンのURLを変更しなくても済みます。