モバイルの時に「ページ分割を指定する」ショートコードの作成方法(WordPress Post Snippets 利用)

スポンサーリンク

 

レスポンシブでページを作成すると、PCの場合は問題ないのですが、モバイルの場合どうしてもページが長くなってしまい途中でページ分割をしたくなります。 

そこで、PCではページ分割せず、モバイルではページ分割を指定できるショートコードを作ってみました。 (このショートコードを投稿ページから外せば通常通りモバイルでもPCでもページ分割できます。)

 

WordPressで、ページ分割する方法(通常の場合)

ビジュアルエディタでは、ページ分割したい所で、ページ区切りボタンを押せば --PAGE BREAK--- が現れ、簡単にページ分割できます。 このボタンアイコンが見つからない時は、「Advance Editor Tools」の設定でツールバーにボタンアイコンを登録できます。

テキストエディタの場合は、ページ分割したい所で<!--nextpage-->タグを記述すればその箇所でページ分割できます。

PCでもモバイルでも、ブラウザでページを見ると下の様にページが分割されます。

Affinger5テーマで、モバイルの場合の条件表示するショートコード【nopc】---PAGE BREAK---【/nopc】で囲んでも、自己完結型のショートコードでないのでページ分割は上手く出来ません。

 

モバイルの時にページ分割し PCはページ分割させない方法

参考にさせて頂いた記事:
「WordPressのマルチページで、PCの時は分割しない、モバイルの時は分割する方法」
URL:https://nelog.jp/remove-nextpage-tag

 

参考にさせて頂いたページ分割の方法は、function.phpに以下のコードを記述することで、PCでは <!--nextpage-->を削除し、モバイルの場合は <!--nextpage-->を残すので、モバイルのみページ分割ができる様になります。 

 

オペレータ
ただこの方法ですと、Wordpressサイト全体に適用されてスマホでページ分割されますが、PCではページ分割ができなくなってしまうところが問題ですね。

対策・ポイント

そこで、この問題を解決するために、上のPHPコードをちょっとモディファイさせて頂きました。 14行〜16行のコード(if文コード部分)をカットし、下のPost Snippetsプラグイン の箇所にペーストし自己完結型のショートコードを作成します。 詳しくは、以下のショートコード作成方法を参照してください。

ページ区切りボタンを押して  --PAGE BREAK---  (テキストモードでは<!--nextpage-->)の直前に作成したショートコードを配置すれば、モバイルではページ分割し、PCでは ページ分割しません。 このショートコードを配置しなければ、通常通りのPC、モバイル両方でページ分割が行われます。

 

Post Snippetsプラグインを使ったモバイルの時に「ページ分割を指定する」ショートコードの作成方法

Post Snippets Pluginの基本的使い方は、以下の記事を参照してください。

「Post Snippets Pluginで出来ること(小技・事例集)」

 

ここに、今回作成した【スマホでページ分割】ショートコードを配置しています。 PC上で確認したいときは、お使いのプラウザで「レスポンシブ・デザイン」モード等にしてスマホ画面にて、ページの再読み込み(リロード)すればページ分割を確認できます。

 

 

オペレータ
では、Post Snippetsプラグイン(以下PSPに略します)の設定画面(下の画面)で項目①〜⑥のエリアについて説明し、ショートコードを作成して行きます。

Post Snippetsの設定画面

にショートコードの名前を記入:ここでは、スマホでページ分割 としました。

前記のfunction.phpに記述したコードのif文(14行〜16行のコード)部分をカットしてのエリアにペーストします。 ただし、今回は、else 以降に次ページのコメントを付記できる様にしています。

Variablesは comment=〜に続きます と記入。 のShortcodeと  のPHPは夫々レ点を入れます。
Descriptionは、適当にわかり易いショートコードの説明文を記入します。 (例:ページ分割より上にこのショートコードを置きます。 ページ分割<!–nextpage–> )

以上の設定が終わったらSave ボタンを押して保存すれば、モバイルの時に「ページ分割を指定する」ショートコードが完成します。 

 完成したshortcode
[スマホでページ分割 comment="〜に続きます"]
ビジュアルエディタで、PSPを呼び出し、下の様に --PAGE BREAK--- の上に「スマホでページ分割」ショートコードを配置します。 これでPCではページ分割せず、モバイルではページ分割を指定できます。 一方PCとモバイルの両方でページ分割したい時はショートコードを配置しなければOKです。
オペレータ

(備考)「スマホでページ分割」ショートコードは、投稿ページに対して適用されるので、複数のページ分割を指定したい場合、投稿ページの1箇所に配置すればOKです。

 

使用上の注意

ページキャッシュプラグインの「WP Fastest Cache 」などを使っている場合、ページキャッシュにより、モバイルの「ページ分割」が正常に機能しない場合があります。 この場合は、当該ページのキャッシュを除外する必要があります。(2021/10/1追記)

 

モバイルの時にページ分割を指定するショートコードの作成方法でした。 

 

オススメ記事
WordPressの旧エディタで「ページ区切り」に付加されてしまう Pタグの構文エラーを対策する方法

    Affinger6の旧エディタで編集中の頁に「ページ区切り」 <!--nextpage-->を挿入して、確認のためプレビューするとChrome拡張機能の「HTM ...

 

 

スポンサーリンク

 

 

スポンサーリンク

 

Blog オススメ記事(コンテンツ選択)
  • レコード音質とハイレゾ化

  • CD音質と圧縮音源 AAC等

  • WordpressやiPhone・PC

  • ツールと閑話ブログ

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WordpressやPCなど

ツールと閑話ブログ