フロントページのレイアウトについて

  • このトピックには13件の返信、2人の参加者があり、最後にM Tにより1年、 12ヶ月前に更新されました。
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • 投稿者
    投稿
  • #5684
    M T
    閲覧者
    5

    ホームページ(フロント)に固定ページを使用し、ウィジェットで「ホームページ上部」にWPAW スライダーを使っています。

    希望のレイアウトは、WPAWスライダーがFull width で、以下の記事部分が2カラム(サイドバー付)なのですが、固定ページをFull widthにしないと、スライダーがFull widthにできません。

    そこで「Elementor」を使ったところ、簡単に希望のレイアウトができました。しかし、このプラグインが重く、ページ速度がかなり遅くなるとのブログ記事をみかけました。PageSpeed Insightsなどで、プラグインの有効、無効で試してみると、実際かなり差がありました。

    これまで使ってきたテーマが非常に遅いのがきっかけでsnow monkeyを購入したので、重たいプラグインは極力入れたくないのですが、よいカスタマイズ方法はないでしょうか。

    このテーマは気に入っていますので、もし、難しければ、スライダーがFull widthではない形で対応したいと考えています。

    0
    #5697
    キタジマ タカシ
    キーマスター
    286

    あーなるほどですね…そのパターンのレイアウトは考えていませんでした。

    サイドバーありテンプレートでカラム分割より上の部分にはウィジェットエリアがないので、とりあえず今考えられる方法としては、ショートコードでスライダーを追加できるスライダープラグインを入れて、アクションフック経由でスライダーを追加する形が簡単かなと思います。

    Meta Slider プラグインだと確かショートコードに対応してたかなと。

    下記のようなコードを子テーマの functions.php に追加してみてください。

    add_action( 'snow_monkey_before_contents_inner', function() {
        if ( ! is_front_page() ) {
            return;
        }
        ?>
        ここにショートコード
        <?php
    } );

    これでカラム分割部分より上にスライダーが追加できるかと思います。ただ、このままだと full width にならないので、CSS で調整が必要だと思います。そのあたりは使用するスライダープラグインによって変わってくると思いますので、もしこの方法で対応されたら、使用されたプラグインなど書き込んでいただければと思います。

    0
    #5701
    M T
    閲覧者
    5

    ご返答ありがとうございました。

    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
    } );
    0
    #5741
    キタジマ タカシ
    キーマスター
    286

    あ、ちょっと僕の書き方が中途半端でした。ショートコードの部分は、「ショートコードを実行する命令」を付け加えて書く必要がありました。

    add_action( 'snow_monkey_before_contents_inner', function() {
        if ( ! is_front_page() ) {
            return;
        }
    
        echo do_shortcode( '[metaslider id="14205"]' );
    } );

    これで生のショートコードではなくスライダーが表示されるようになると思いますがどうでしょうか?

    0
    #5748
    M T
    閲覧者
    5

    2カラム分割部分の上に現われました!ありがとうございました。

    ただ、幅が小さいので、full widthにするCSSを教えていただけましたらありがたいです。

    また、縦横比率はスマホの場合も同じになるのでしょうか。

    0
    #5800
    M T
    閲覧者
    5

    お世話になっています。

    左右に余白ができるため、デベロッパーツールで調べてみたのですが、どの部分を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]”);
    }

     

    0
    #5803
    キタジマ タカシ
    キーマスター
    286

    下記の CSS を追加してみてください。

    .metaslider {
      margin-right: calc(50% - 50vw);
      margin-left: calc(50% - 50vw);
      max-width: none !important;
    }

    また、スマホ画面の場合に縦の比率を大きくしたいので、PCとスマホで切り替える方法を調べ、別々のidで振り分ける以下のコードをfunction.phpに追加しましたが、動きませんでした。

    コードは特に間違ってなさそうな気がします。「動かない」というのは具体的にどのような状態でしょうか?
    (「常に PC 用が表示されてしまう」「真っ白で何も表示されない」など)

    0
    #5853
    M T
    閲覧者
    5

    ありがとうございます。左右フルサイズになりました!

    スマホの条件分岐の件ですが、id等間違っていないようですが、常にPC用の画像が表示されます。コードは子テーマのfunction.phpの最後に追加しただけです。

    0
    #5854
    キタジマ タカシ
    キーマスター
    286

    ありがとうございます。左右フルサイズになりました!

    それは良かったです!

    常にPC用の画像が表示されます。

    wp_is_mobile() は、ブラウザのユーザーエージェント(閲覧ブラウザや OS が何であるかという情報)を取得して処理を分岐させます。なので、例えば PC で閲覧していてブラウザを小さくしただけでは PC 用のスライダーが表示されてしまいます。モバイル用の確認は実機で行われていますか? (ブラウザの開発者ツールなどでユーザーエージェントを変更して確認することも可能ではあります)

    0
    #5868
    M T
    閲覧者
    5

    実機で確認していますが、今度はfunction.phpに追加すると、エラーコードが出て、画面が真っ白になるようになりました。

    phpの知識があまりないので、何か記述が間違っているのでしょうか。

    それと、最初におしえていただいた下記はidが一つですが、これは関係ないでしょうか。

    add_action( ‘snow_monkey_before_contents_inner’, function() {
    if ( ! is_front_page() ) {
    return;
    }

    echo do_shortcode( ‘[metaslider id=”14205″]’ );
    } );

     

    0
    #5873
    キタジマ タカシ
    キーマスター
    286

    ちょっと全貌が見えて無くて外しているかもしれませんが、僕が書いた 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]' );
        }
    } );
    0
    #5880
    M T
    閲覧者
    5

    申し訳ありません。途中から新たな質問を織り交ぜて、ややこしくしてしまいました。

    多分、今回送っていただいたコードで解決すると思いますが、追加してアップすると、下記のエラーが出て画面が白くなってしまいます。

    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]”); です。

     

    0
    #5881
    キタジマ タカシ
    キーマスター
    286

    クオーテーションがおかしくなってたのかもです、今シングルクオーテーションに置き換えましたので、もう一度コピペしてみてください!

    ”[metaslider id=14246]”'[metaslider id=14246]' に変えました)

    0
    #5882
    M T
    閲覧者
    5

    ありがとうございました。ヘッダー画像 希望の通りになりました!

    0
14件の投稿を表示中 - 1 - 14件目 (全14件中)
  • トピック「フロントページのレイアウトについて」には新しい返信をつけることはできません。