ボタンをクリックすると画面外からヌルっと表示するコンテンツを実装する方法（jQuery+CSS）|Personal WP Customization Notes (PWCN)

公開日：2023(令和5)年4月29日／最終更新日： 2023(令和5)年4月30日

WordPressはあえて無効にしない限り、jQueryのライブラリを読み込んでいるので、使わない手はない！ということで、jQueryとCSSを使って「ボタンをクリックすると画面外からヌルっと表示するコンテンツ」（以下「スライドコンテンツ」と表します）を作ってみました。

「スライドコンテンツ」で表示するものといえば、大抵はメニューということになるのでしょうけど、それでは芸がないので、今回は、いろいろなコンテンツを表示できるよう、内容を再利用ブロックから引っ張ってくるという仕様にしてみます。

「グローバルナビゲーション-クリックしたらナビが左から右に出現-」というページの内容を参考にして、WordPressで再現しようと試みた、自身用のメモページも兼ねていますので細かいところに不具合や不都合があるかも知れません。ご容赦ください。

なお、本ページの内容は、このサイトでも使っているTT2(Twenty Twenty-Two)テーマで実装した場合のものですので、他のテーマや環境では調整が必要だったりうまく動作しないかも知れません。

2023年4月30日現在、パソコン・モバイルとも、このサイトでデモ表示させています。画面左上にあるをクリックして、実際の動作を確認してみてください（デモの機能は「Hima Art Utility」プラグインに同梱したものですので、若干仕様が異なります）。

スライドコンテンツの仕組みと動作の流れ

まずは、カスタマイズする上で必要なこととして、どんな流れで、スライドが表示されたり隠れたりするのかというのを簡潔に説明しておきます。

本機能について結論から言うと、ボタンクリックで、なかったものがスーッと現れるというよりは、隠されていた（画面外にあった）ものがボタンクリックで表示されたり隠されたりするという表現が正しいかも知れません。

今回実装したスライドコンテンツの動作は、以下のような流れになります。

「開く」ボタンを画面上に常時表示させる
ボタンをクリックすると表示する内容にCSSクラスが付与される（jQueryで制御）
CSSクラスが付与されると、スタイルコードによって、隠れていたものが表示される
（同時に同じ仕組みで「開く」ボタンを非表示にする）
表示されたものの中の「閉じる」ボタンをクリックすると、2で追加されたCSSクラスが削除され、再び隠れ、「開く」ボタンが表示される
（同時に同じ仕組みで中のコンテンツのリンクをクリックしても同じ動作になるようにする）

次項の実装手順では、この流れで処理を行うためのコードを紹介していきます。

このサイトでも2023年4月30日現在この機能を実装しています。実装中は画面左上にボタンがありますので、クリックすると、上記機構の動作を確認できます（左から別画面が現れるようにしています）。

流れを見て、また、実際にクリック動作を確認してみて、「これはいい！」と思う方は、次へ進んでください。

手順やコードの解説、カスタマイズ方法を含め、かなり長いページですので、ブックマークなどしてゆっくりとご覧ください。

スライドコンテンツの実装手順

さて、ここからは実装編です。このサイトと同じくTT2テーマで作っていて、このサイトで配布しているTT2の子テーマを有効化している場合は、ほぼコピペで機能自体は実現可能です（他のテーマ等の場合は逐次補足しています）。

ここから先の説明で、大まかに、「jQueryの追加」「スタイルコードの追加」「関数の追加」の3つを行いますが、それぞれが関連していますので、カスタマイズする場合はひとまずコピペで動作するようにしてから行いましょう（カスタマイズ方法は後述します）

jQueryの追加

以下のコードを「child-script.js」へ追加します

jQuery(document).ready(function($) {
//開くボタンクリック時
$("#openbtn").click(function () {
	$("#closebtn").toggleClass('active');//閉じるボタンにactiveクラスを付与
	$("#openbtn").toggleClass('active');//開くボタンにactiveクラスを付与
    $("#g-nav").toggleClass('panelactive');//スライドにpanelactiveクラスを付与
});

//閉じるボタンクリック時
$("#closebtn").click(function () {
	$("#openbtn").removeClass('active');//開くボタンからactiveクラス削除
	$(this).removeClass('active');//閉じるボタンからactiveクラスを削除
    $("#g-nav").removeClass('panelactive');//スライドからpanelactiveクラスを削除
});

//スライド内のリンククリック時
$("#g-nav a").click(function () {
	$("#openbtn").removeClass('active');//開くボタンからactiveクラスを削除
	$("#closebtn").removeClass('active');//閉じるボタンからactiveクラスを削除
    $("#g-nav").removeClass('panelactive');//スライドからpanelactiveクラスを削除
});
});

コードの解説

コード自体は、各行に注釈を入れている通り、最初の塊で、「開く」ボタンをクリックしたら

「閉じる」ボタンに「active」というクラスを追加
（これで、スライドコンテンツが開いた時にCSSで「閉じる」ボタンを出現させます）
「開く」ボタンにも「active」というクラスを追加
（これでスライドコンテンツが開いたときにCSSで「開く」ボタンを非表示にします）
スライドに「panelactive」クラスを追加
（これで、CSSを使って隠れていたスライドコンテンツを出現させます）

という動作をさせ、次の塊で、「閉じる」ボタンをクリックしたら逆の動作をするようにしています。

また、最後の塊で、コンテンツ内のリンクがクリックしたら、リンク先へ移動するとともに、「閉じる」ボタンをクリックした時と同じ動作をするようにしています。

TT2の子テーマ以外の場合

多分これが一番ややこしい部分でしょう（このサイトで配布しているTT2用の子テーマはこの機能が既に搭載されているので、コピペで済むのです）。

１．「child-script.js」というファイルを作る

パソコン上で、メモ帳（できれば他のテキストエディタがよい）を開き、何も入力せずに「child-script.js」というファイル・拡張子で保存します

１．「child-script.js」を有効化しているテーマへアップロードする

FTPクライアントツールやサーバーのファイルマネージャーを使って、有効化している子テーマのstyle.cssと同じ階層へ「child-script.js」をアップロードします

１．「child-script.js」を読み込ませるプログラムを追加する

以下のコードを子テーマのfunctions.phpへ追加して、「child-script.js」をサイト上で読み込むようにします

/***** スクリプトの読み込み *****/
function sample_child_script_include() {
	wp_enqueue_script( 'sample_child_script', get_stylesheet_directory_uri() .'/child-script.js', array('jquery'), null , true );
}
add_action( 'wp_enqueue_scripts', 'sample_child_script_include' );

コード中の色のついた部分で、必ずWordPressのjQueryよりも後で読み込むようにし、かつ、フッターへ出力して、表示速度に極力影響がないようにしています

子テーマに1つ「child-script.js」と読み込ませるコードを仕込んでおくことで、今後、何かの参考ページで「JSやjQueryを追加して！」と書かれている場合に、このファイルへ追加するだけで読み込ませることができるので便利ですヨ！

CSSの追加

以下のコードをテーマ（子テーマ推奨）のstyle.cssへ追加します

/*** スライド画面 ***/
/* 基本 */
#g-nav{
	position:fixed;
	z-index: 999;
	top:0;
	left: -120%;/* 一旦画面外へ追いやる */
	width:40%;
	height: 100vh;
	background:#eee;
	transition: all 0.6s;
	overflow: auto;
}

/* 「開く」ボタンクリック後 */
#g-nav.panelactive{
	left: 0;/* 画面の左端にくっつける */
}

/* モバイルでは幅を80%にする */
body.is-mobile #g-nav{
	width:80%;
}

/*** 内部のコンテンツ ***/
/* 基本 */
#g-nav-content{
	padding:20px;
	margin-top:40px;
	margin-bottom:20px;
		
}

/* 管理バーがあるとき */
body.admin-bar #g-nav-content{
	margin-top:72px;
}

/*** ボタン ***/
/* 基本 */
#openbtn , #closebtn.active{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:18px;
	left: 20px;
	cursor: pointer;
	width:auto;
	height:auto;
	background:red;
	border-radius:4px;
	font-size:2em;
	color:#fff;

}

/* 管理バーがあるとき */
body.admin-bar #openbtn  , body.admin-bar #closebtn.active{
	top:50px;
	left: 20px;
}


/*** パネル展開時に「開く」ボタンを非表示にする ***/
#openbtn.active {
	display:none;
}

テーマカスタマイザーのあるテーマやTT2子テーマ以外の場合

管理画面の「外観」をマウスオーバーした際に「カスタマイズ」という項目がある場合には、その画面を開き、「追加CSS」という項目へ上記のコードを追加します。

また、その他のテーマ（子テーマ推奨）に「style.css」がある場合はそちらへ追加します。

出力する内容の追加

表示する再利用ブロックの準備

再利用ブロックは、投稿（または固定ページ）を新規作成して、下図のような手順で作成できます。

ブロックリストを表示させます
再利用ブロック化するブロックを選択します
（始点クリック後、「Shift」を押しながら終点をクリックすると複数選択できます）
三点リーダーをクリックします
「再利用ブロックを作成」をクリックします
適当な名前を付けて保存します

後のテストで使用するため、再利用ブロック内には他のページや投稿へのリンクを1つ含めておいてください

再利用ブロックを保存したら、以下のようにしてIDを控えておきます。

ブロックの追加を選択します（「+」マークをクリックするなど）
「すべて表示」をクリックします
「ブロック」「パターン」「メディア」の右にあるマークをクリックします
「再利用ブロックを管理」をクリックします
投稿一覧のような画面が出るので、作成した再利用ブロックの「編集」をマウスオーバーします
画面左下にURLが表示されるので、URL中の「?post=〇〇」の〇〇を控えます

テーマのfunctions.phpへのコード追加

以下のコードをテーマ（子テーマ推奨）のfunctions.phpへ追加します

/***** スライド内のコンテンツ（再利用ブロック）呼び出し *****/
/* ダッシュアイコンをフロントでも表示 */
if ( !function_exists( 'sample_dashicons_style_init_for_slide' ) ){
function haup_dashicons_style_init_for_slide() {
wp_enqueue_style('dashicons');
}
}
add_action( 'wp_footer', 'sample_dashicons_style_init_for_slide' );

/* コンテンツ取得のコールバック */
/* echo出力するのでコールバック化（一応） */
if ( !function_exists( 'sample_get_block_slide_reuse' ) ){
function sample_get_block_slide_reuse() {
	$content_post = get_post( '再利用ブロックのID' );
	$content = $content_post->post_content;
	return $content;
}
}

/* フッターへ出力 */
if ( !function_exists( 'sample_slide_block_content_footer' ) ){
function sample_slide_block_content_footer() {
	//再利用ブロックをコールバック関数から呼び出す
	$content = apply_filters( 'the_content', sample_get_block_slide_reuse() );
	?>
<div id="openbtn"  class="dashicons dashicons-menu"></div>
<aside>
<div id="g-nav">
<div id="closebtn"  class="dashicons dashicons-arrow-left-alt"></div>
<div id="g-nav-content">
<?php echo $content; ?>
</div>
</div>
</aside>
<?php
}
}
add_action('wp_footer','sample_slide_block_content_footer');

/***** PC Mobileでそれぞれbodyclassを付与 *****/
if ( !function_exists( 'sample_pc_mobile_body_class' ) ){
function sample_pc_mobile_body_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
}
add_filter( 'body_class', 'sample_pc_mobile_body_class' );

コード中の「再利用ブロックのID」となっているところを先ほど作成した再利用ブロックのID(数字のみ)に変更してから保存してください

コードの解説

今回はボタンのマーク（アイコン）に、WordPress標準のダッシュアイコン（管理画面で表示されているアイコン）を使っていますので、まずは最初の関数でダッシュアイコンを表示画面側でも表示できるようにしています。

次の関数で、再利用ブロックを引っ張ってくるためのコールバック関数を設定しています。

その次の関数で、フッターへ再利用ブロックのコンテンツを出力しています。

最後に、パソコンとモバイルとでスライド表示するコンテンツの幅を変更するため、それぞれにbodyクラスを付与し、CSSで判別して、パソコンでは画面幅の40%、モバイルでは画面幅の80%になるようにしています。

これで一通りの作業は完了です。終わったらサイトのページを表示させて、以下の動作を確認してみてください。

画面の左上にアイコン（赤色）が表示されているか？また、スクロールしてもずっと表示されているか？
アイコンをクリックしたら、左から画面が現れ、再利用ブロックの内容が表示されるか？
赤色の「←」アイコンをクリックしたら、画面が閉じて元に戻るか？
再利用ブロック内のリンクをクリックしたら、クリック先ページへ遷移するか？
再利用ブロック内のリンクをクリックしたら、画面が閉じて元に戻るか？

きちんとコピペ（実装）できていれば、スムーズに動くはずです。動かない場合は再度内容をチェックしてください（2で内容が表示されない場合は、再利用ブロックのIDを再確認してみてください）

紹介したコードの工夫点とカスタマイズのポイント

当サイトで配布している「Hima Art Utility」プラグインへの機能追加をするべく作成した機能なので、結構各所に工夫をしています（前出のプラグインの各機能ではこんな工夫がいっぱいしてありますのでよかったらどうぞ！）

「Hima Art Utility」の機能については以下のリンク先ページをご覧ください。

WordPressサイトの運営に必要な機能を詰め込んだプラグイン【Hima Art Utility】

コードや機能で工夫した点

表示速度に影響を極力与えないようにしています

前述している通り、本機能はボタンクリック時の動作に「WordPress標準のjQuery」を、ボタンアイコンには「WordPress標準のダッシュアイコン」を使用しています。

従って、何かのコードでこれらを無効にしてなければ、至って軽快に動作します。

また、jQueryのコードについても最小限のコードで書いていますので、負荷はほとんどないと思います。

再利用ブロックで再編集が楽にできるようにしています

再利用ブロックは、投稿や固定ページと同じように編集でき、編集した内容は即時反映され、同じ再利用ブロックを挿入したところすべてが一括で更新できるWordPress標準の機能です。

投稿などと同じように「公開」というボタンをクリックしますが、実際は、一般の人が見える形で公開するわけではなく、投稿などに挿入して表示できるようにする、いわば使わなければ隠れたコンテンツです。

今回のスライドコンテンツでは、

通常の投稿と同じようにいつでも編集ができる
編集したものがすぐに反映できる
投稿と同じようにブロックで思った形（列構成や色など）にできる

という特性を利用していますので、メンテナンスがとてもしやすいです。

もちろん、スライドコンテンツには、WordPress標準のメニュー（ナビゲーション）ブロックを含めることもでき、リスト表示にしたり、階層構造の表示方法を指定したりという標準のオプションも使え、どこにでも挿入できます。

ただ1点できないことがあります。それは、親ページ（投稿）内のコンテンツの抽出ができないことです。例えば、目次を出力したり、親ページの内容の一部を抽出して表示させるといったことはできません（これは再利用ブロックのIDが親となるため仕方ありません－一応親ページを取得できないかと画策しましたが難しいようですので割愛しました）。

より安全にスライドコンテンツを出力するよう配慮しています

この機能では、再利用ブロックをフッターへ出力しています。再利用ブロック内のデータの健全性については、投稿や固定ページと同じようにセキュリティが担保されていますが、出力時に「echo」を使う必要があるため、データの取得から出力までの間に若干の不安が生じます。

そこで、再利用ブロックのコンテンツを取得する別の関数（コールバック関数）を設け、「echo」時にはコールバック関数で返された値（スライドコンテンツ）を出力するようにし、できる限り健全性を保つようにしています。

スライドコンテンツが本文とは別と認識されやすくしています

スライド内の再利用ブロックは、本文の前後ではなく、フッター（body末タグの直前）へ出力し、かつasideタグで囲んで「補助的なコンテンツです」という宣言をしています。

パソコンとモバイルで幅を変えています

スライドコンテンツは、画面の大きさを考慮し、パソコン表示時には画面幅の40%、タブレットとモバイルでは80%になるようにしています。

また、これをメディアクエリを使って画面幅で区切るとスタイルコードがどんどんややこしくなるため、WordPress標準の判定関数を使ってそれぞれにbodyクラスを付与し、簡単に切り分けできるようにしています。

テーマのfunctions.phpへ追加したコードのうち、以下のユーザー定義関数がこれに該当します。一度この関数を登録しておけば、他のスタイルコードでも、パソコン時は「body.is-pc」、モバイル時は「body.is-mobile」を付与することで簡単に切り分けができて便利です。

/***** PC Mobileでそれぞれbodyclassを付与 *****/
if ( !function_exists( 'sample_pc_mobile_body_class' ) ){
function sample_pc_mobile_body_class( $classes ) {
    if ( wp_is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
}
add_filter( 'body_class', 'sample_pc_mobile_body_class' );

スタイルコードを簡素にし、カスタマイズしやすくしています

ボタンやコンテンツの表示に使うスタイルコードは可能な限り簡素にして、少ない編集でカスタマイズできるようにしています（カスタマイズ方法は後述）。

欲を言えば、「閉じる」ボタンをもっと遅く表示する、「閉じる」ボタンをクリックした際に、若干コンテンツが上下動するのを止めるなどやっておいた方がいいことはあるのですが、多分（個人的には）気にならないレベルなので割愛しました。

また、内部コンテンツについては、再利用ブロックを使うことから、エディター内である程度の装飾ができるので、余白のみを指定するだけにしてあります。

カスタマイズのポイント

ここまで紹介したコードを元に、ご自身で変更（カスタマイズ）したいと思われる場合の変更方法について補足しておきます。

アイコンを変更したい

functions.phpへ追加したコード中の以下の部分でアイコンの表示をしています。

【開くボタン】

<div id="openbtn"  class="dashicons dashicons-menu"></div>

【閉じるボタン】

<div id="closebtn"  class="dashicons dashicons-arrow-left-alt"></div>

別のダッシュアイコンと入れ替える場合は、こちらからダッシュアイコンを選びます。

アイコンを選んでクリックしたら、「Copy HTML」をクリックし、出てきた窓の中の「class=”…”」の部分を入れ替えます。

ボタンの色や位置、大きさを変えたい

style.cssへ追加したコード中の以下の部分を変更します。

以下のコードのコピーへ注釈を入れておきましたので、任意に変更ください。

/*** ボタン ***/
/* 基本 */
#openbtn , #closebtn.active{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:18px; /* 画面の最上部からの位置 */
	left: 20px; /* 画面の左からの位置 */
	cursor: pointer;
	width:auto;
	height:auto;
	background:red; /* アイコンの背景色 */
	border-radius:4px; /* 囲み線の丸み */
	font-size:2em; /* アイコンの大きさ */
	color:#fff; /* アイコンの色 */
}

また、上のコードでは、「開く」ボタンと「閉じる」ボタンを共通に設定しているので、#openbtn（開くボタン）と#closebtn.active（閉じるボタン）を別々にすれば、双方のボタンでデザインを分けることができます（恐らく一緒にしておいた方が不自然ではない気がします）。

スライドコンテンツの位置や色、幅などを変えたい

style.cssへ追加したコード中の以下の部分を変更します。

以下のコードのコピーへ注釈を入れておきましたので、任意に変更ください。

#g-nav{
	position:fixed;
	z-index: 999;
	top:0;
	left: -120%;/* 一旦画面外へ追いやる */
	width:40%; /* パソコン時の幅 */
	height: 100vh;
	background:#eee; /* 背景色 */
	transition: all 0.6s;
	overflow: auto;
}

/* モバイルでは幅を80%にする */
body.is-mobile #g-nav{
	width:80%; /* モバイルでの幅 */
}

スライドの方向を変えたい

style.cssへ追加したコード中の以下の赤字部分を変更します。

#g-nav{
	position:fixed;
	z-index: 999;
	top:0;
	left: -120%;/* 一旦画面外へ追いやる */
	width:40%;
	height: 100vh;
	background:#eee;
	transition: all 0.6s;
	overflow: auto;
}

/* 「開く」ボタンクリック後 */
#g-nav.panelactive{
	left: 0;/* 画面の左端にくっつける */
}

２．上から下へ表示させる場合

「top:0;」を削除する
「left: -120%;」を「top: -120%;」へ変更する
「left: 0;」を「top:0;」へ変更する

つまり、上から-120%の位置にあるもの（画面から上の外）を、「開く」ボタンで上から0の位置へ移動させるということです。

最初は欄外（見えない場所）にあればいいので、-120%はもっと大きくしても、小さくしてもいいかも知れません

以下、この法則の応用ですので、基本コードに戻してから、自由に試してみてください。

３．下から上へ表示させる場合

「top:0;」を削除する
「left: -120%;」を「bottom: -120%;」へ変更する
「left: 0;」を「bottom:0;」へ変更する

４．右から左へ表示させ、左へ表示させる場合（画面を横断して左へ表示）

「left: -120%;」を「left: 120%;」へ変更する

５．左から右へ表示させ、右へ表示させる場合（画面を横断して右へ表示）

「left: -120%;」を「right: 120%;」へ変更する
「left: 0;」を「right:0;」へ変更する

６．右から左へ表示させ、右へ表示させる場合

「left: -120%;」を「right: -120%;」へ変更する
「left: 0;」を「right:0;」へ変更する

５と６でコンテンツを右に表示させたとき、「閉じる」ボタンを右に表示させる場合は、以下のコードも変更します。

【変更前】

#openbtn , #closebtn.active{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:18px;
	left: 20px;
	cursor: pointer;
	width:auto;
	height:auto;
	background:red;
	border-radius:4px;
	font-size:2em;
	color:#fff;

}

【変更後】

#openbtn{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:18px;
	left: 20px;
	cursor: pointer;
	width:auto;
	height:auto;
	background:red;
	border-radius:4px;
	font-size:2em;
	color:#fff;

}

#closebtn.active{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top:18px;
	right: 20px;
	cursor: pointer;
	width:auto;
	height:auto;
	background:red;
	border-radius:4px;
	font-size:2em;
	color:#fff;

}

また、閉じる方向も変わるので、前述したアイコンの入れ替えも必要ですね。

スライド表示の速度を変えたい

style.cssへ追加したコード中の以下の赤字部分を変更します。

#g-nav{
	position:fixed;
	z-index: 999;
	top:0;
	left: -120%;/* 一旦画面外へ追いやる */
	width:40%;
	height: 100vh;
	background:#eee;
	transition: all 0.6s;
	overflow: auto;
}

タブレットをパソコンとして判別させたい

まずは以下のページを参考に、タブレットをパソコンとして判別するようにするユーザー定義関数を作ります。

モバイルを判定するための関数について

追加したら、functions.phpへ追加した、以下のモバイル判定用関数で、「wp_is_mobile」だった部分を、赤字のように「is_mobile」へ変更します。

/***** PC Mobileでそれぞれbodyclassを付与 *****/
/* https://www.isitwp.com/add-custom-body_class-using-wp_is_mobile/ */
if ( !function_exists( 'haup_pc_mobile_body_class' ) ){
function haup_pc_mobile_body_class( $classes ) {
    if ( is_mobile() ) {
        $classes[] = 'is-mobile';
    }else{
		$classes[] = 'is-pc';
	}
    return $classes;
}
}
add_filter( 'body_class', 'haup_pc_mobile_body_class' );

複数のスライドを使いたい

一番複雑なので仕組みの応用方法のみ紹介します。例えば、左から40%のコンテンツと右から40%のコンテンツを別々に表示・非表示させたい場合は、以下のようにします。

jQueryの内容を丸ごとコピーして、同じファイルの下の行へ貼り付ける
style.cssへ追加したコードを丸ごとコピーして、下の行へ貼り付ける
別のコンテンツ用の再利用ブロックを作り、IDを控える
functions.phpへ追加したコードをコピーして修正する（欄外参照）
それぞれのCSSクラス及びIDを調整する

右と左のコンテンツも、ボタンもバラバラなので、以下のIDとCSSクラスを決めておきます。

要素	左の場合（作成例と同じ）	右の場合
スライドコンテンツの外枠	g-nav	g-nav-right
スライドコンテンツの内側	g-nav-content	g-nav-content-right
クリック後のコンテンツ追加クラス	panelactive	panelactive-right
「開く」ボタン	openbtn	openbtn-right
「閉じる」ボタン	closebtn	closebtn-right
ボタンクリック後の追加クラス	active	active-right

決めたら、１と２の作業をし、コード中のクラスやIDを右画面用に変更します。

続いて右画面用の再利用ブロックを作り、IDを控えておきます。

一番大変なのが、4の措置です。functions.php内で以下の作業が必要です。

以下のコンテンツを出力する部分のコードのみを下へコピーします。

/* コンテンツ取得のコールバック */
/* echo出力するのでコールバック化（一応） */
if ( !function_exists( 'sample_get_block_slide_reuse' ) ){
function sample_get_block_slide_reuse( $id ) {
	$content_post = get_post( '再利用ブロックのID' );
	$content = $content_post->post_content;
	return $content;
}
}

/* フッターへ出力 */
if ( !function_exists( 'sample_slide_block_content_footer' ) ){
function sample_slide_block_content_footer() {
	//再利用ブロックをコールバック関数から呼び出す
	$content = apply_filters( 'the_content', sample_get_block_slide_reuse( $id ) );
	?>
<div id="openbtn"  class="dashicons dashicons-menu"></div>
<aside>
<div id="g-nav">
<div id="closebtn"  class="dashicons dashicons-arrow-left-alt"></div>
<div id="g-nav-content">
<?php echo $content; ?>
</div>
</div>
</aside>
<?php
}
}
add_action('wp_footer','sample_slide_block_content_footer');

コード中の青色部分と緑色部分が共通になり、かつ、コピー元の文字列と同じにならないように変更します（以下例です）。

/* コンテンツ取得のコールバック */
/* echo出力するのでコールバック化（一応） */
if ( !function_exists( 'sample_get_block_slide_reuse_right' ) ){
function sample_get_block_slide_reuse_right( $id ) {
	$content_post = get_post( '再利用ブロックのID' );
	$content = $content_post->post_content;
	return $content;
}
}

/* フッターへ出力 */
if ( !function_exists( 'sample_slide_block_content_footer_right' ) ){
function sample_slide_block_content_footer_right() {
	//再利用ブロックをコールバック関数から呼び出す
	$content = apply_filters( 'the_content', sample_get_block_slide_reuse_right( $id ) );
	?>
<div id="openbtn"  class="dashicons dashicons-menu"></div>
<aside>
<div id="g-nav">
<div id="closebtn"  class="dashicons dashicons-arrow-left-alt"></div>
<div id="g-nav-content">
<?php echo $content; ?>
</div>
</div>
</aside>
<?php
}
}
add_action('wp_footer','sample_slide_block_content_footer_right');

これで一旦保存してみてエラー等が出ないか確認します。

問題なく保存できたら、コード中のクラスとIDを右画面用にすべて変更して保存します。

あとはカスタマイズ例などを参照の上、画面の位置、ボタンの位置などを調整してください。

ボタンをクリックすると画面外からヌルっと表示するコンテンツを実装する方法（jQuery+CSS）

スライドコンテンツの仕組みと動作の流れ

スライドコンテンツの実装手順

jQueryの追加

コードの解説

TT2の子テーマ以外の場合

１．「child-script.js」というファイルを作る

１．「child-script.js」を有効化しているテーマへアップロードする

１．「child-script.js」を読み込ませるプログラムを追加する

CSSの追加

テーマカスタマイザーのあるテーマやTT2子テーマ以外の場合

出力する内容の追加

表示する再利用ブロックの準備

テーマのfunctions.phpへのコード追加

コードの解説

紹介したコードの工夫点とカスタマイズのポイント

コードや機能で工夫した点

表示速度に影響を極力与えないようにしています

再利用ブロックで再編集が楽にできるようにしています

より安全にスライドコンテンツを出力するよう配慮しています

スライドコンテンツが本文とは別と認識されやすくしています

パソコンとモバイルで幅を変えています

スタイルコードを簡素にし、カスタマイズしやすくしています

カスタマイズのポイント

アイコンを変更したい

ボタンの色や位置、大きさを変えたい

スライドコンテンツの位置や色、幅などを変えたい

スライドの方向を変えたい

２．上から下へ表示させる場合

３．下から上へ表示させる場合

４．右から左へ表示させ、左へ表示させる場合（画面を横断して左へ表示）

５．左から右へ表示させ、右へ表示させる場合（画面を横断して右へ表示）

６．右から左へ表示させ、右へ表示させる場合

スライド表示の速度を変えたい

タブレットをパソコンとして判別させたい

複数のスライドを使いたい

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル