- このトピックには13件の返信、2人の参加者があり、最後に
により5年、 7ヶ月前に更新されました。
-
投稿
-
ホームページ（フロント）に固定ページを使用し、ウィジェットで「ホームページ上部」にWPAW スライダーを使っています。
希望のレイアウトは、WPAWスライダーがFull width で、以下の記事部分が2カラム（サイドバー付）なのですが、固定ページをFull widthにしないと、スライダーがFull widthにできません。
そこで「Elementor」を使ったところ、簡単に希望のレイアウトができました。しかし、このプラグインが重く、ページ速度がかなり遅くなるとのブログ記事をみかけました。PageSpeed Insightsなどで、プラグインの有効、無効で試してみると、実際かなり差がありました。
これまで使ってきたテーマが非常に遅いのがきっかけでsnow monkeyを購入したので、重たいプラグインは極力入れたくないのですが、よいカスタマイズ方法はないでしょうか。
このテーマは気に入っていますので、もし、難しければ、スライダーがFull widthではない形で対応したいと考えています。
いいねをした人: 居ませんあーなるほどですね…そのパターンのレイアウトは考えていませんでした。
サイドバーありテンプレートでカラム分割より上の部分にはウィジェットエリアがないので、とりあえず今考えられる方法としては、ショートコードでスライダーを追加できるスライダープラグインを入れて、アクションフック経由でスライダーを追加する形が簡単かなと思います。
Meta Slider プラグインだと確かショートコードに対応してたかなと。
下記のようなコードを子テーマの functions.php に追加してみてください。
add_action( 'snow_monkey_before_contents_inner', function() { if ( ! is_front_page() ) { return; } ?> ここにショートコード <?php } );これでカラム分割部分より上にスライダーが追加できるかと思います。ただ、このままだと full width にならないので、CSS で調整が必要だと思います。そのあたりは使用するスライダープラグインによって変わってくると思いますので、もしこの方法で対応されたら、使用されたプラグインなど書き込んでいただければと思います。
いいねをした人: 居ませんご返答ありがとうございました。
MetaSliderを入れ、functions.phpに追加しまたが、画像は2カラムのうち、左側に配置され（従来と同じレイアウト）、ショートコード自体がカラム分割部分より上に配置されてしまいました。
基本的なことで恐縮ですが、functions.php への記述（下記）が間違っているのでしょうか。
ウィジェットのMetaSliderは「ホームページ上部」にドラッグ。コードはMetaSliderの管理画面からコピーしたものです。
add_action( 'snow_monkey_before_contents_inner', function() { if ( ! is_front_page() ) { return; } ?> [metaslider id="14205"] <?php } );いいねをした人: 居ませんあ、ちょっと僕の書き方が中途半端でした。ショートコードの部分は、「ショートコードを実行する命令」を付け加えて書く必要がありました。
add_action( 'snow_monkey_before_contents_inner', function() { if ( ! is_front_page() ) { return; } echo do_shortcode( '[metaslider id="14205"]' ); } );これで生のショートコードではなくスライダーが表示されるようになると思いますがどうでしょうか？
いいねをした人: 居ません2カラム分割部分の上に現われました！ありがとうございました。
ただ、幅が小さいので、full widthにするCSSを教えていただけましたらありがたいです。
また、縦横比率はスマホの場合も同じになるのでしょうか。
いいねをした人: 居ませんお世話になっています。
左右に余白ができるため、デベロッパーツールで調べてみたのですが、どの部分をfull widthにするか分からず、教えていただけましたらありがたいです。
また、スマホ画面の場合に縦の比率を大きくしたいので、PCとスマホで切り替える方法を調べ、別々のidで振り分ける以下のコードをfunction.phpに追加しましたが、動きませんでした。
間違っているのでしょうか。よろしくお願いいたします。
if( wp_is_mobile() ){
// mobile用
echo do_shortcode(“[metaslider id=14254]”);
}else{
// PC用
echo do_shortcode(“[metaslider id=14246]”);
}いいねをした人: 居ません下記の CSS を追加してみてください。
.metaslider { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); max-width: none !important; }また、スマホ画面の場合に縦の比率を大きくしたいので、PCとスマホで切り替える方法を調べ、別々のidで振り分ける以下のコードをfunction.phpに追加しましたが、動きませんでした。
コードは特に間違ってなさそうな気がします。「動かない」というのは具体的にどのような状態でしょうか？
（「常に PC 用が表示されてしまう」「真っ白で何も表示されない」など）いいねをした人: 居ませんありがとうございます。左右フルサイズになりました！
スマホの条件分岐の件ですが、id等間違っていないようですが、常にPC用の画像が表示されます。コードは子テーマのfunction.phpの最後に追加しただけです。
いいねをした人: 居ませんありがとうございます。左右フルサイズになりました！
それは良かったです！
常にPC用の画像が表示されます。
wp_is_mobile()は、ブラウザのユーザーエージェント（閲覧ブラウザや OS が何であるかという情報）を取得して処理を分岐させます。なので、例えば PC で閲覧していてブラウザを小さくしただけでは PC 用のスライダーが表示されてしまいます。モバイル用の確認は実機で行われていますか？ （ブラウザの開発者ツールなどでユーザーエージェントを変更して確認することも可能ではあります）いいねをした人: 居ません実機で確認していますが、今度はfunction.phpに追加すると、エラーコードが出て、画面が真っ白になるようになりました。
phpの知識があまりないので、何か記述が間違っているのでしょうか。
それと、最初におしえていただいた下記はidが一つですが、これは関係ないでしょうか。
add_action( ‘snow_monkey_before_contents_inner’, function() {
if ( ! is_front_page() ) {
return;
}echo do_shortcode( ‘[metaslider id=”14205″]’ );
} );いいねをした人: 居ませんちょっと全貌が見えて無くて外しているかもしれませんが、僕が書いた
snow_monkey_before_contents_innerにフックさせるコードと、wp_is_mobile()を使ったコードの2つを書いているということでしょうか？もしそうであれば、
snow_monkey_before_contents_innerにフックさせるコードが所定の位置にスライダーを表示させる命令になりますので、その中でショートコードをechoしている部部分をwp_is_mobile()を使ったコードに置き換えるのが正しい形となります。つまり、下記のような感じです。
add_action( 'snow_monkey_before_contents_inner', function() { if ( ! is_front_page() ) { return; } if ( wp_is_mobile() ) { // mobile用 echo do_shortcode( '[metaslider id=14254]' ); } else { // PC用 echo do_shortcode( '[metaslider id=14246]' ); } } );いいねをした人: 居ません申し訳ありません。途中から新たな質問を織り交ぜて、ややこしくしてしまいました。
多分、今回送っていただいたコードで解決すると思いますが、追加してアップすると、下記のエラーが出て画面が白くなってしまいます。
Parse error: syntax error, unexpected ‘id’ (T_STRING), expecting ‘]’ in /URL＊＊＊＊＊＊＊＊＊＊＊/snow-monkey-child/functions.php on line 121
121行目は echo do_shortcode(“[metaslider id=14254]”); です。
いいねをした人: 居ませんクオーテーションがおかしくなってたのかもです、今シングルクオーテーションに置き換えましたので、もう一度コピペしてみてください！
（
”[metaslider id=14246]”を'[metaslider id=14246]'に変えました）いいねをした人: 居ません
- トピック「フロントページのレイアウトについて」には新しい返信をつけることはできません。