K&S PLAGEを支援する

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列

そのままだとスライドショーが表示されるので[]は全角に変更してます。
[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)については下記をご覧ください。

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設定・構築やウェルカートに関するご質問等もお気軽にご連絡下さい。
支援者募集中 tippin.me ほしい物リスト

Follow Me
K&S PLAGE

コメント

タイトルとURLをコピーしました