サイドバーの表示方法をスマホ・PCで変えたい

Question

#実現したいこと
WordPressでテーマを作っています。

たまたま見つけたこのブログlink のように、画面幅でサイドバー・ウィジェットの表示場所を変えたいです。

幅が896px未満のスマホ表示の時は、ハンバーガーメニューを押すと表示
幅が896px超のPCの時は、2カラム左側に表示
上記のようにしたいです。

#試したこと

jqueryを使ったこの手法を使おうと思い、「PC」「SP」とIDをつけたdivタグで囲った、get_sidebar()を、本文の下と、bodyのてっぺんに置いて、CSSでdisplay:’none’しました。

先に読み込まれてるであろう、スマホ用にbodyのてっぺんに置いたget_sidebar()は表示されていますが、本文の下に置いた方が表示されなくて、スマホ表示は理想どうりですが、PCは表示できません。

#追記1

　jqueryで、appendToを、window.matchMedia内に記入し、思ったことができました。

しかし、リサイズして、appendToで動いたサイドバー内の、Twitterウィジェットのiframeが真っ白になってしまいました。

リロードすると治るので、setTimeout()メソッドを使ったこのページの方法で、横のリサイズのたびに全体のリロードをさせ、~~一応は解決しましたが、~~もっとスマートなやり方があれば教えて欲しいです。

全体をリロードさせると、PCでウインドウを引っ張るといちいち更新してチカチカしますね。もっといい方法を教えて欲しいです。

Comments

[aKusano]

実際のコードを掲載すると的確な回答が得られるかもしれません。
現在作成中のHTML・CSS・JSを掲載してください。
（※長くなりすぎる場合は該当部分のみに編集してください）

Answer 1

get_sidebar関数は最終的にrequire_onceでテンプレートを呼び出す仕様なので、locate_templateで呼び出せば2つ同じテンプレートを呼び出すことが出来ると思います。（テンプレート上のコードによっては同じような問題が起きる可能性があります）

位置を変えるならjQueryで移動してしまうのが早いとは思います。

locate_template( 'sidebar.php', false );

【locate_template() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/locate_template/

【locate_template – WordPress私的マニュアル】
https://elearn.jp/wpman/function/locate_template.html

【jQuery 要素 移動 - Google 検索】
https://www.google.co.jp/search?safe=off&q=jQuery+%E8%A6%81%E7%B4%A0+%E7%A7%BB%E5%8B%95

Comments

[kei344]

To: 低評価された方
低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

[_magurochan]

window.matchMediaとappendToで思ったことができるようになりました。

Answer 2

• .appendTo
• ajax
• window.matchMedia

を使い、実現できました。

<script>
$(document).ready(function(){

    $('#wid-sp').appendTo('#wid-pc');
	 $.ajax('<?php echo get_template_directory_uri(); ?>/a-tw.html').done(function(data) {
 $('#ajax-content').html(data)});		
	
																		  
});

window.matchMedia("(min-width:896px)").addListener( myFunc );
function myFunc(){
     //$('#wid-sp').appendTo('#wid-pc');
		 $.ajax('<?php echo get_template_directory_uri(); ?>/a-tw.html').done(function(data) {
 $('#ajax-content').html(data)});	
	

	
};
        
 
	</script> 

Answer 3

コードがないので適当に回答しますが、コードに間違いがあると思います。

レスポンシブデザインと呼ばれるレイアウトをしたいのだと思いますが、実現する技術はいくつかあるので調べてみてください。