こちらも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″と表示されているのですが、この番号をそのまま指定するのは、間違っているのでしょうか?
なにとぞ宜しくお願い致します。
えーっと、私普段Page Builder by SiteOriginは使っていないのですが、該当のスラッグ指定欄を見ると「Enter the slug for your category or leave empty to show posts from all categories.」と書いてあるので、投稿のスラッグではなくて、カテゴリースラッグを入れるのだと思うのですが、カテゴリースラッグを入れても崩れがでますか??
mypacecreator様、
返信が遅くなり申し訳ございません。
適切なアドバイスのおかげで無事解決致しました。
ありがとうございます。
まだまだ機能的な面を十分に把握しておらず、mampから本番へ上げたこともないので課題が
山積みですが、またアドバイス頂けたら助かります。
私も名古屋で勤務していますので、名古屋の勉強会などあれば積極的に参加したいと思います。
宜しくお願い致します。