サポート » テーマ » sydneyの最新ニュースを表示するウィジェットがうまく作動しません、助けて下さい!

  • お世話になります。
    現在MAMPを使ったローカル環境にてsydneyをテーマにしてサイト制作をしています。
    投稿機能を調整しようと思った際に、シドニーウィジェットの”最新ニュースを表示”をフロントページ内に新着記事として全て表示させる分と、ある一定の記事をいくつか表示させたかったので、スラッグで指定した記事を表示させようと思い、このウィジェットを2度使用した際に、全て表示させることは問題なかったのですが、スラッグ指定をかけた途端に”最新ニュースを表示”より下のコンテンツが、ガタガタに崩れてしまいました。
    ページレイアウトを組む際には”Page Builder by SiteOrigin”を使用しています。
    phpの知識が浅く、手探りで色々なサイトを見て回っているのですが、どうしようもない状態です。
    どなたかわかる方見えましたらご助言頂けると幸いです。
    宜しくお願い致します。

    追記:
    CPT-UIなどのカスタム投稿機能を使用しておりません。
    投稿記事を種類分けしてフロントページに表示したかったので一度は作成しましたが、
    カスタム投稿記事を作成する管理画面でブログ投稿と同じpage builder readyという
    フロントページなどと同じテンプレートを選択できる欄が管理画面右側になく、あるのは固定ページの属性というタブの中に、親と順序という、項目だけでしたので、利用をやめてしまいました。
    これも、もし解決方法わかる方がお見えでしたらお助け下さい。

    • このトピックは daiki256が1 週、 6 日前に変更しました。
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • モデレーター mypacecreator

    (@mypacecreator)

    こちらもMAMPのローカル環境にSydneyテーマとPage Builder by SiteOriginプラグインをインストールして検証を試みました。

    スラッグ指定をかけた途端に”最新ニュースを表示”より下のコンテンツが、ガタガタに崩れてしまいました。

    については、おそらくスラッグ指定が直接の原因なのではなく、表示されている記事が違うのでたまたまそうなった、ということだと思います。

    このテーマはBootstrap3ベースで作られています。Bootstrap3はカラムのレイアウトがfloatで組まれているので、記事が横に並んだとき、左に表示されるタイトルより右に表示されるタイトルのほうが長かったりして、ボックスの高さが揃わないとレイアウトが崩れます。

    この問題はWordPressやPHPに由来するものではないのですが、CSSで強引に解決できます。
    このテーマの場合はたとえば、外観 > カスタマイズ > 追加CSSに

    
    .panel-widget-style {
        letter-spacing: -0.2em;
    }
    .panel-widget-style * {
        letter-spacing: normal;
    }
    
    .blog-post {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    というようなCSSを足してしまえばとりあえずそれっぽくなると思います。
    (こまかいところはご自身で調整してください)

    ※もしくはJavaScriptで.blog-postの高さを揃えるという手もあります。
    matchHeightプラグインを使えば jQuery matchHeight.jsを簡単に導入できるっぽいです
    https://ja.wordpress.org/plugins/matchheight/

    ※グリッドスタイルで高さを同じにする
    https://qiita.com/chii/items/8e2d0d04d02f3fecebce
    という方法もあって、こっちのほうがイマドキっぽいのですが、Page Builderで生成するHTMLがいじれなくて、見出しも記事と同じ高さに揃ってしまったのでだめでした。

    mypacecreator様、情報提供ありがとうございます。
    早速CSS追加等やってみたのですが、
    どうもレイアウトの崩れ方のパターンが”シドニーフロントページ: 最新ニュース”を
    先頭要素に、2番目に”シドニーフロントページ: 最新ニュース”にスラッグ番号を指定したもの、
    3番目に”シドニーフロントページ: サービスタイプB”
    4番目に”シドニーフロントページ: お客様の声”と、上から並んでいるのですが、
    CPT-UIでカスタム投稿機能を作成していて、この作成したカスタム記事に対してスラッグ番号が自動的に割り振られているのですが、その番号を2番目の要素の最新ニュース要素に指定していると、
    先頭のスラッグ指定なしの最新ニュースのみ残し、ガタガタに崩れることが分かりました。
    ちなみに最新ニュースにスラッグ番号を指定せずに、最新ニュースと最新ニュースを立て続けに並べると問題なく綺麗に表示されます。

    もし間違っていたら教えていただきたいのですが、
    最新ニュースの要素にスラッグを指定できる欄があるのですが、
    例えば、カスタム投稿記事の編集画面にスラッグが”3946-2″と表示されているのですが、この番号をそのまま指定するのは、間違っているのでしょうか?
    なにとぞ宜しくお願い致します。

    モデレーター mypacecreator

    (@mypacecreator)

    えーっと、私普段Page Builder by SiteOriginは使っていないのですが、該当のスラッグ指定欄を見ると「Enter the slug for your category or leave empty to show posts from all categories.」と書いてあるので、投稿のスラッグではなくて、カテゴリースラッグを入れるのだと思うのですが、カテゴリースラッグを入れても崩れがでますか??

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。