WordPressテーマ「SERUM」をメジャーアップデートしました。

設定画面のUIを整理し、操作方法がわかりにくい点を改修しました。必要に応じて画像や注釈が追加されていたり、諸々の機能が新しくなっています。

それぞれ一部をピックアップしてご紹介いたします。

設定画面のUI変更

まずは設定画面のUIが変わった箇所をいくつかご紹介いたします。参考画像や番号の追加が中心です。

ロゴ

例えば、ロゴの設定箇所はこんな感じに進化しました。

  • 旧UI
  • 新UI

SERUMはデザインの特性上、ロゴ周りの設定が少し特殊だったんですよね。一般的なヘッダーロゴの他に、アイコンやスクエアロゴという項目もあるからです。一目でどこの設定かわかりにくかったので、直感的に理解できるように画像を差し込みました。

診療案内

診療案内のアーカイブページのヘッダーまわりについてです。参考画像と番号を加え、誰もが設定しやすいようになりました。

  • 旧UI
  • 新UI

ここ最近リリースしているテーマでは設定画面のわかりやすさを意識しているため、それに倣ってSERUMにも改修を加えています。

フッター

複数の要素が組み合わさっているフッター部分は、次のように変更されました。

  • 旧UI
  • 新UI

旧バージョンと比較して、かなり直感的に設定いただけるようになったと思います。

機能追加/仕様変更

機能追加や、仕様変更について一部をピックアップしてご紹介いたします。

コンテンツビルダー

トップページを構成するコンテンツビルダー機能には、表示、非表示を切り替えられるon/offスイッチを実装しました。

  • 旧UI
  • 新UI

また、設定したキャッチフレーズが設定画面上にも表示される仕様になりました。設定内容を確認しやすくなっています。

ウィジェット「デザインされた記事一覧」

ウィジェット「デザインされた記事一覧」では、ブログ記事の他に、お知らせ記事、診療案内記事も表示できるようになりました。

切り替えはワンタッチです。なお、診療案内記事は、管理画面の順番と連動して表示される仕様です。

SERUM診療案内ページの管理画面

順番は、管理画面内でドラッグ&ドロップして並び替え可能です。

ウィジェット「検索セット」

ウィジェット「検索セット」(旧名:「フィルターと検索」)に、タグ一覧を追加しました。

ウィジェット「検索セット」

項目を一塊で表示できるので、以下のような表示も実現可能になりました。
※アプデ前に「フィルターと検索」をすで設定済みの方は、ウィジェットを再登録することで、新しく「タグ一覧」の項目が出現します。

もちろん、並び替えや一部のみ非表示にすることも可能です。

変更内容、修正・追加したファイル一覧

変更内容

■トップページ>スプラッシュ画面に「表示回数」オプションを追加
■コンテンツビルダーにon/offボタンを追加、キャッチフレーズをコンテンツ名の右に表示するように変更
■ブログ>投稿記事に記事下の「タイトルとURLコピー」ボタンを追加
■ヘッダー>メガメニュー(ブログ)に「記事のタイプ」「表示順」オプションを追加
■ヘッダー>サイドアイコンボタンにGoogle fontのオプションを追加(使えるアイコンが900種類以上に)
■フッター>アイコンバナーにGoogle fontのオプションを追加(使えるアイコンが900種類以上に)
■フッター>フッターバーにGoogle fontのオプションを追加(使えるアイコンが900種類以上に)
■ウィジェット「デザインされた記事一覧」で「お知らせ」や「施術案内」記事を表示可能に変更
■ウィジェット「デザインされた記事一覧」に「タイトル」を追加
■ウィジェット「フィルターと検索」を「検索セット」に名称変更、「タグ」を追加
汎用クラスを追加
■テーマオプションの文言変更、注釈追加、設定画面の整理
■その他、記事編集画面やウィジェットエリアの注釈などを調整、追記

修正したファイル

admin/css/my_admin.css
admin/img/sns_color_type1.png
admin/img/sns_color_type2.png
admin/img/treatment_category_image.jpg
admin/img/treatment_list_image.jpg
admin/inc/basic.php
admin/inc/blog.php
admin/inc/footer.php
admin/inc/front_page.php
admin/inc/header.php
admin/inc/news.php
admin/inc/seo.php
admin/inc/treatment.php
admin/js/my_script.js
css/design-plus.css
css/footer-bar.css
css/responsive.css
functions/footer-bar.php
functions/footer_script.php
functions/head.php
functions/load_icon.php
functions/loader_css.php
functions/menu.php
functions/page_cf.php
functions/quick_edit.php
functions/seo.php
functions/treatment_category.php
functions/user-profile.php
img/common/facebook.png
img/common/hatena.png
img/common/line.png
js/jscript.js
languages/default.mo
languages/default.po
languages/ja.mo
languages/ja.po
template-parts/breadcrumb.php
widget/css/style.css
widget/js/script.js
widget/search_box.php
widget/styled_post_list.php
404.php
author.php
footer.php
functions.php
header.php
search.php
single-news.php
single.php
style.css

追加したファイル

admin/img/404_image.jpg
admin/img/blog_archives_image.jpg
admin/img/blog_main_image.jpg
admin/img/blog_name_image.jpg
admin/img/cb_box_content_image.jpg
admin/img/cb_carousel_image.jpg
admin/img/font_image_headline.jpg
admin/img/font_image_page_header.jpg
admin/img/font_image_post_content.jpg
admin/img/font_image_post_title.jpg
admin/img/footer_carousel_image.jpg
admin/img/footer_icon_image.jpg
admin/img/footer_main_image.jpg
admin/img/footer_menu_image.jpg
admin/img/header_icon_image.jpg
admin/img/header_logo_image.jpg
admin/img/header_message_image.jpg
admin/img/header_slider.jpg
admin/img/header_square_image.jpg
admin/img/lp_display.jpg
admin/img/lp_header_image.jpg
admin/img/mega_menu_image.jpg
admin/img/news_archives_image.jpg
admin/img/news_main_image.jpg
admin/img/news_name_image.jpg
admin/img/news_ticker_image.jpg
admin/img/no_result_image.jpg
admin/img/page_header_image.jpg
admin/img/sc_faq_image.jpg
admin/img/sc_representative_image.jpg
admin/img/sc_staff_lists_image.jpg
admin/img/side_icon_image.jpg
admin/img/treatment_archive_main_image.jpg
admin/img/treatment_archives_image.jpg
admin/img/treatment_name_image.jpg
fonts/tiktok_x_icon.woff
img/common/twitter_x.png