Affinger5【WING】アップデートレイアウト修正

この記事は約4分で読めます。

Affinger5のベータ版アップデートしたらレイアウトが崩れた。

先日、Affinger5【WING】の大幅なアップデートがあり私も早速ダウンロードしました。
そしてまたもや初心者ならではの失敗談がございます(´;ω;`)

親テーマ、子テーマ共にアップロードしそのまま有効化をすると新しいテーマが適応されます。STINGER系テーマアップデータープラグインやバックアップをしてれば元に戻せますね。もしバックアップ等がない場合、今までカスタマイズした親テーマ・子テーマの設定は消えてしまいます。

私は子テーマでカスタマイズしてますが、新子テーマをそのままアップロードし有効化してしまった為、再度カスタマイズが必要になりました。
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列

解決方法が見つからなかった為、簡単に使えるスライドショープラグイン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)については下記をご覧ください。

WordPressパーマリンク設定方法おすすめ
パーマリンクとは? WordPress Codex 日本語版 パーマリンクとは、ブログの...
スマホSafari・chrome問題なく表示されてます。
スポンサーリンク
AFFINGER5 【WING】 WordPress WordPress テーマ プラグイン
\Follow Me/
スポンサーリンク

国産ワードプレステーマ

DINA
クラブ・ライブハウス向けWordPressテーマ

OOPS!
ビジネス・店舗HP向けWordPressテーマ

Welcart対応WordPressテーマ

ICONIC
Welcart対応WordPressテーマ

GLAMOUR
Welcart対応WordPressテーマ

sao

田舎暮らしに憧れて東京から鹿児島へ。現実は思ってた以上に厳しく挫折( ;∀;)この記事良かったよ~参考になったよ!などコメント頂けたらとても嬉しいです。wordpress設定・構築やウェルカートに関するご質問等もお気軽にご連絡下さい。

\Follow Me/
K&S PLAGE

コメント