>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

ウィジェットや特定部位をAMP・モバイル・特定ページで非表示にしたい

ウィジェットや特定部位をAMP・モバイル・特定ページで非表示にしたい WordPress・カスタマイズ
この記事は約5分で読めます。

特定の箇所や、ウィジェットをAMPページやモバイル端末では表示させたくない場合の対処方法についてです。

やりたい事にもよりますが、いくつか方法があります。

特定のウィジェットを非表示

プラグインで対応

特定のウィジェットを非表示にしたい場合には、「Widget Logic」や「Widget Options」というプラグインで対応可能です。

 

Widget Options

「Widget Options」は、固定ページ・投稿・404・トップページ・タクソノミー(カテゴリー・タグ)の単位に細かく表示・非表示設定が可能です。

Widget Options」については、以下をご覧ください。

ウィジェット表示のあらゆるカスタマイズができるWidget Options
はじめに WordPressのウィジェットを、表示したいページ、非表示にしたいページなどがある場合、このプラグインを使えば簡単に制御可能です。 また、ページよって非表示にする事で、余計な情報を除き、速度アップも期待できます。 「Widget...

 

Widget Logic

「Widget Logic」は、カテゴリーを指定できますが、アーカイブページのみに対応で、カテゴリー内のすべての記事を対象にしたい場合は、ページのすべてのIDを羅列する必要があります。

どのように利用したいかに合わせて、「Widget Logic」で検索すると、使い方を説明しているサイトがたくさんあります。

 

 

PHPで対応

function.phpに以下のコードを追記する事でモバイルページで特定のウィジェットを非表示にすることができます。

 

function remove_specific_widget($sidebars_widgets){
if(!is_admin() && wp_is_mobile()){
foreach($sidebars_widgets as $widget_area => $widget_list){
foreach($widget_list as $pos => $widget_id){
if($widget_id=='custom_html-XX'){
unset($sidebars_widgets[$widget_area][$pos]);
}
}
}
} 
return $sidebars_widgets;
}
add_filter('sidebars_widgets','remove_specific_widget');
5行目の「custom_html-XX」の部分は、対応のウィジェットIDを指定

 

function.phpファイルを編集しますが、このファイルはWordPressが動かなくこともある重要ファイルです。くれぐれもバックアップを取るなどの自己防衛を行って下さい。

 

function.phpを直接編集せず、いざという時にはセーフモードもある便利なプラグインもあります。以下「Code Snippets」プラグインについての詳細です。

function.phpを直接触らず、いざという時はセーフモードもあるプラグイン
function.phpを直接編集するカスタマイズの際は、注意しないとワードプレス自体が動かなくなってしまう事があります。 当然、バックアップをとっておいたり、注意深く編集はしますが「万一」の場合のドキドキはありますよね。 そこで今回は、f...

その他にも「WP Code」というプラグインもあります。

 

HTMLとCSSで対応

カスタムHTMLを使ったウィジェットであれば、HTMLとCSSのみで表示・非表示を制御可能です。

詳細は以下の項目で。

特定の部位を非表示

記事内の一部や、カスタムHTMLウィジェットは、HTMLとCSSのみで表示・非表示を制御可能です。

モバイルページで非表示に

 

HTML

<div class="mobile-display-none">
ここにモバイルでは表示しないコード
</div>

CSS

/*スマホで非表示*/
@media screen and (max-width: 767px){
.mobile-display-none{display:none;}
}
CSSは子テーマのスタイルシート(style.css)に追記します。

 

AMPページで非表示に

 

HTML

<div class="amp-display-none">
ここにAMPページでは表示しないコード
</div>

 

CSS

/* AMPページで非表示 */
.amp-display-none { display: none; }
CSSはAMP用のスタイルシート(style-amp.cssなど)に追記します。

 

モバイルとAMPの両方で非表示にする場合のHTML

<div class="amp-display-none mobile-display-none">
ここにコード
</div>

 

特定ページで非表示に

 

HTML

<div class="display-none">
ここにコード
</div>

CSS

/*特定ページで非表示*/
.postid-XX .display-none{display:none;}
上記サンプルは投稿を指定する例です。XXはIDです。

 

IDについて

各ページの指定方法

トップページ .home
トップページ以外 body:not(.home)
固定ページ .page-id-XX
投稿 .postid-XX
カテゴリー .categoryid-XX
カテゴリーアーカイブ category-event
タグ .tag-XX
タグアーカイブ tag-event
アーカイブページすべて archive
検索結果ページ search
404ページ error404

 

記事のIDは<body>タグにクラス指定されていて、ページのソースや、Chromeの検証(F12)を見る事でも調べられます。

記事のID

 

カテゴリーや記事のIDがわからない場合は以下をご覧ください。

WordPress ページやカテゴリー・タグの固有IDの調べ方
はじめに WordPressでは、記事やカテゴリーに固有のユニークIDが自動で振られます。 それぞれにユニーク(唯一無二)の数字IDになっていて、このIDがわかればウィジェットやプラグインなどで記事やカテゴリー、タグを指定した処理を行う際に...

 

 

 

コメント

タイトルとURLをコピーしました