モバイルの時に「ページ分割を指定する」ショートコードの作成方法(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-->を残すので、モバイルのみページ分割ができる様になります。 

 

オペレータ
ただこの方法ですと、PCでページ分割ができなくなってしまうところが問題ですね。

対策・ポイント

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

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

 

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

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

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

 

オペレータ
では、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です。

 

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

 

スポンサーリンク

 

関連記事(一部広告含む)

 

オススメ記事

レコードのハイレゾ化
オススメ記事

blank
LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

blank
アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CD音質のここがダメ「ハイレゾ(24bit)と比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

CD音質を凌ぐ?「ハイレゾ音源のAAC変換」を行うために

XLDサイトへ AAC (Advanced Audio Coding)音質はビットレートを最高品質の320kbpsでAAC変換しても漠然とCD音質には及ばないと思っていました。 ところが、ピュアー音源 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

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

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

スポンサーリンク

© 2021 ハイレコのブログ Powered by AFFINGER5