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