Affinger5のベータ版アップデートしたらレイアウトが崩れた。
先日、Affinger5【WING】の大幅なアップデートがあり私も早速ダウンロードしました。
そしてまたもや初心者ならではの失敗談がございます(´;ω;｀)
私は子テーマでカスタマイズしてますが、新子テーマをそのままアップロードし有効化してしまった為、再度カスタマイズが必要になりました。
STINGER系テーマアップデータープラグインを利用してるのですぐ元に戻せますが、使いたい機能を諦めたくないなぁーと思い、再設定する事にしました。
STINGER系テーマアップデータープラグインは下記のように旧テーマを自動でバックアップしてくれます。
今回のアップデートで崩れたレイアウト
- WordPress Popular Postsのデザインが大幅に右にずれた
- スマホ chromeはOK。Safariだと画面全体の表示が右にずれる
- スライドショースマホ SafariはOK。chrome[続きを読む]までの縦表示が長文になる。
解決済
- wordpress popular postsのデザインカスタム
- 子テーマのstyle.cssにleft: -〇px;を追加しマイナスで調整した。
- スマホSafariだと画面全体の表示が右にずれる
- AFFINGER5管理→メニュー→スマホ用スライドメニュー→【メニューの位置】左→右に変更
WordPress Popular Postsのデザインが大幅に右にずれた原因が判明
bodyのfont-familyをオリジナルフォントに設定した為でした。
フォントをGoogleフォント変更し
子テーマstyle.cssのleft: -〇px;を削除したら正常に戻りました。
更新 2018.06.10
未解決
スライドショー
AFFINGER5管理→トップページの設定→挿入コンテンツ
トップページに挿入できるコンテンツ（挿入固定記事の下に表示）
下記内容で設定した場合
960px以上（大画面） 3列
そのままだとスライドショーが表示されるので［］は全角に変更してます。
［st-catgroup cat=”0″ page=”5″ order=”desc” orderby=”id” child=”on” slide=”on” slides_to_show=”3,3,2″ slide_date=”off” slide_more=”続きを読む”］
スマホのchromeだと[続きを読む]までの縦表示が長文になる。
解決方法が見つからなかった為、簡単に使えるスライドショープラグインMetaSliderを使うことにしました。SEOに最適化されたレスポンシブ・スライドショーで設定も簡単です。
スライドショープラグインMetaSlider設定方法
- MetaSliderプラグインをインストールし有効化する。
- ダッシュボード→MetaSlider→MetaSlider
スライドを追加
Ctrlを押しながら画像を選択すると複数選べます。
画像を選んだらAdd to slideshowボタンを押します。
一般設定
上のスライドを追加画像をご覧ください。
キャプションにタイトルを入力
ページのURLを入力
SEOの設定
画像の代替文字列にキーワードを含めた文字を入力します。
切り抜き
右上のプレビューで確認しながらお好みで設定して下さい。私は中央/中央で設定してます。
Slider設定
画像の表示で設定すると私と同じになります。
この下に高度な設定もありますのでプレビューで確認しながらお好みで設定して下さい。
設定が終わりましたら保存します。
トップページ・投稿記事・サイドバーあらゆる場所にスライダーを設定できます。
トップページにスライダーを設定する場合
固定ページ→トップページ→スライダーを追加ボタンを押しスライドショーを挿入ボタンを押します。先程作成した↓スライドショーのタグが挿入されるのでそのまま更新を押します。
［metaslider id=1387］
Affinger5【WING】のトップページにスライダーを設定する場合
新規に固定ページを作成しスライダーを追加ボタンを押しスライドショーを挿入ボタンを押します。先程作成したスライドショーのタグ［metaslider id=1387］が挿入されるのでそのまま公開ボタンを押します。
AFFINGER5管理→トップページ→トップページの設定
画像の矢印に作成した固定ページのpost-id（記事ID）を入力して保存。
post-id（記事ID）については下記をご覧ください。
コメント