SWELL2.0アップデートによるテーマファイルの変更点まとめ

このページでは、SWELL2.0へのメジャーアップデートでのテーマファイル内の変更点についてご紹介していきます。

（コード部分の話となります。）

SWELL2.0での新機能やアップデート時の注意事項などに関してはリリース告知記事で触れていますので、先にそちらをご覧になってからこの記事をお読みください。

コア部分の変更点

SWELLの内部構造が大きく変化しており、functions.phpの記述もかなり変わりました。

その他、ほぼ全てのファイルの内容が変更されています。

クラス構造の大幅な変更と名前空間の導入

これまでは/libの中身のファイルをそのままrequireで呼び出す形で様々な機能を実装していましたが、それらの多くをクラス化しました。

ファイルの保存場所も/lib/classから/classesへ移動しています。

さらに、多くのクラスで名前空間を指定しています。（ベースとなるベンダー名は、SWELL_THEMEです。）

クラスに関する基本ルール

名前空間がつくクラスのメソッドは、できるだけユーザーが編集する可能性の低い（触って欲しくない）ファイル内にて使用。
名前空間に属さないクラスの名前は、SWELL_から始まり、全て大文字としている。

partsディレクトリの構造整理

/libとは別の/partsというディレクトリには、SWELL_FUNC::get_parts()で呼び出す独自のテンプレートパーツを入れていますが、ここの構造も細分化して整理しました。

スタイル生成部分のコードを大幅に変更

カスタマイザーの設定値によって変化するスタイルの生成コードを大幅に変更しました。

もう少し具体的にいうと、これまでは単純に文字列として連結していくだけだったものを、生成用メソッドを用意して好きな場所から生成できるようにしました。
（名前空間\SWELL_THEME\OutputのStyleにて管理しています。）

さらに、CSS変数も導入し始めました。

変更されたクラス名・メソッド名

変更前	変更後
LOOS_DATA	SWELL_DATA
LOOS_FUNC	SWELL_FUNC
LOOS_FUNC::get_page_title()	SWELL_PARTS::page_title()
LOOS_FUNC::get_term_title()	SWELL_PARTS::term_title()
LOOS_FUNC::get_rgba()	\SWELL_THEME\Utility::get_rgba()
LOOS_FUNC::display_star()	SWELL_PARTS::review_stars()
LOOS_FUNC::set_settings()	\SWELL_THEME\Data->set_settings() \SWELL_THEME\Data::set_setting() の２つに分離
LOOS_FUNC::get_phrase()	SWELL_PARTS::catchphrase()
LOOS_FUNC::get_post_thumb_src()	SWELL_PARTS::post_thumbnail()
LOOS_FUNC::pagenation()	SWELL_PARTS::pagenation()
LOOS_FUNC::get_tab_list()	SWELL_PARTS::tab_list()

※ 記載漏れがいくつかあるかもしれません

変更・追加されたフィルターフック

フィルターフックについても変更や追加があります。
（以下、「変更前」に記述がないものは新たに追加されたものになります。）

変更前	変更後
swell_post_thumb	swell_parts_post_thumbnail
	swell_parts_page_title
	swell_parts_term_title
	swell_parts_catchphrase
	swell_parts_post_thumbnail
	swell_parts_pagination
	swell_parts_head_logo
loos_related_post_args	swell_related_post_args
	swell_related_post_404_text
	swell_post_list_type_on_term
	swell_post_list_type_on_archive
	swell_post_list_type_on_search
	swell_post_list_type_on_author
	swell_parts_term_head
	swell_infobar_data

※ 記載漏れがいくつかあるかもしれません

フックの外し方が変わってしまった処理

コアのフックへ投げていた関数も、一部クラスメソッドとして整理しました。
つまり、フックの外し方・処理の上書きの仕方が変わっていますのでご注意ください。

例えば'wp_enqueue_scripts'フックなどに投げていた関数などです。

基本的に各クラスには、インスタンスを取得するためのget_instance()メソッドを用意していますので、そちらを使ってフックを外してください。

例：ファイル読み込み処理のフックを書き換える

//Before：function_exists() で分岐させていたので、親テーマより先に関数を定義すればOKだった
function LOOS_HOOK_front_scripts() {
  //自分なりの処理
}

//After：フックを外してから新登録
remove_action( 'wp_enqueue_scripts', [\SWELL_THEME\Load_Files::get_instance(), '__wp_enqueue_scripts'], 8 );
add_action( 'wp_enqueue_scripts', function() {
  //自分なりの処理
}, 8 );

HTML / CSS 構造の変更点

各エリアで付与されていたクラス名も大きく変わっている部分がいくつかありますので、ご紹介しておきます。

※ 記載漏れがいくつかあるかもしれません

bodyにつくクラス名の変更点

.no_index_ → .-index-off
.scoff_/.scon_ → .-sc-off/.-sc-on

ヘッダー部分

旧構造

#header
  .head_bar
    .phrase
    .c-iconList 
  .head_inner
    .logo_wrap
      .head_logo[.img_|.txt_]
        .head_logo_link
    .gnav
      .gnav_menu
    .head_widget_wrap
      .head_widget
    .head_custom_btn
    .head_menu_btn
    .sp_head_nav[.no_loop]
      .sp_head_menu

#fix_bar
  .head_inner
    .logo_wrap
      .head_logo[.img_|.txt_]
        .head_logo_link
    .gnav
      .gnav_menu

新構造

#header.l-header
  .l-header__bar
    .c-catchphrase
    .c-iconList 
  .l-header__inner
    .l-header__logo
      .c-headLogo[.-img|.-txt]
        .c-headLogo__link
    .l-header__gnav.c-gnavWrap
      .c-gnav
    .w-header
      .w-header__inner
    .l-header__customBtn
    .l-header__menuBtn
    .l-header__spNav[.-loop-off]
      .p-spHeadMenu


#fix_header.l-fixHeader
  .l-fixHeader__inner
    .l-fixHeader__logo
      .c-headLogo[.-img|.-txt]
        .c-headLogo__link
    .l-fixHeader__gnav.c-gnavWrap
      .c-gnav

さらに、カスタマイザーに合わせて付与される.parallel/.seriesなどのクラスが
.-parallel / .-seriesへと変わっています。

お知らせバー

.c-noticeBarが.c-infoBarに。

スマホメニュー

ヘッダーのクラス変更に合わせ、メインのナビゲーションに付くクラス名が少し変わりました。

旧構造

.p-spMenu__mainNav[.gnav]
  .gnav_menu

新構造

.p-spMenu__nav[.-gnav]
  .c-gnav

フッター

旧構造

#footer
  .footer_wrap
    .footer_widget_area.l-container
    .footer_foot
      .l-container
        #footer_menu

新構造

#footer.l-footer
  .l-footer__inner
    .l-footer__widgetArea
      .w-footer.l-container
    .l-footer__foot
      .l-container
        .l-footer__nav

パンくずリスト

旧構造

#breadcrumb
  ul
    li
     [a|span]
      (span)

新構造

#breadcrumb.p-breadcrumb
  ol.p-breadcrumb__list
    li.p-breadcrumb__item
      [a|span].p-breadcrumb__text
        (span)

ページャー

旧構造

.pagenation
  .pager
  .pager_dot

新構造

.c-pagenation
  .page-numbers  (コメントエリアに出てくるページャーのクラス名に合わせました)
  .c-pagination__dot

メインビジュアル

旧構造

#main_visual.type_{slide|movie}.{full_screen_|set_hight_|noset_hight_}[.on_margin_]
  .mv_inner.mv_{image|slider|video}
    (.swiper-wrapper)
      .img_layer
      .text_layer
        .slide_title
        .slide_text
        (.slide_link|.c-mvBtm)

新構造

#main_visual.p-mainVisual.-type-{single|slide|movie}.-height-{full|set|noset}[.-margin-on]
  .p-mainVisual__inner
    (.swiper-wrapper)
      .p-mainVisual__imgLayer
      .p-mainVisual__textLayer
        .p-mainVisual__slideTitle
        .p-mainVisual__slideText
        (.p-mainVisual__slideLink|.p-mainVisual__slideBtn.c-mvBtm)

ブログカード

旧構造

.blog_card
  .blog_card_inner
    .blog_card_caption
    .post_thumb
      .post_thumb_inner
        .post_thumb_img
    .post_text
      .post_title
        .post_excerpt

新構造

.p-blogCard
  .p-blogCard__inner
    .p-blogCard__caption
    .p-blogCard__thumb.c-postThumb
      .c-postThumb__figure
        .c-postThumb__img
    .p-blogCard__body
      .p-blogCard__title
       p-blogCard__excerpt

記事一覧リスト

旧構造

ul.post_list[.{type}_style][.pc_column{n}.sp_column{n}][.ranking_|.new_]
  li.post_list_item
    a.post_list_inner
      div.post_thumb
        div.post_thumb_inner
          img.post_thumb_img
        (span.post_cat)
      div.post_text
        div.post_meta
          time.post_date
          time.post_modified
          span.post_views
          span.post_cat
        h2.post_title
        p.post_excerpt

新構造

ul.p-postList[.-type-{type}][.pc-col-{n}.sp-col-{n}][.-w-{ranking|new}]
  li.p-postList__item
    a.p-postList__link
      div.p-postList__thumb.c-postThumb
        figure.c-postThumb__figure
          img.c-postThumb__img
        span.c-postThumb__cat
      div.p-postList__body
        h2.p-postList__title
        div.p-postList__excerpt
        div.p-postList__metas
          time.p-postList__date
          time.p-postList__modified
          span.p-postList__views
          span.p-postList__cat

投稿ページ

旧構造

.p-postHead
.p-postFoot
.p-postMetas


// アイキャッチ画像
.post_thumbnail[.youtube_]
  img.thumb_img
  (iframe)
  (.thumb_figcaption)


//前後記事へのリンク
.prev_next_links.pn_style_{nomal|simple}[.thumb_on_]
  .pn_link[.prev_|.next_]
    .pn_wrap
      (.pn_thumb)
      span
  

//記事下コンテンツ
#after_article
  .bottom_section
    .bottom_section_title


//コメントエリア
.comment_wrap
  .comment_ttl_[list|write]
  .comments_list

新構造

.p-articleHead
.p-articleFoot
.p-articleMetas


// アイキャッチ画像
.p-articleThumb[.-youtube]
  img.p-articleThumb__img
  (iframe.articleThumb__youtube)
  (.p-articleThumb__figcaption)


//前後記事へのリンク
.p-pnLinks.-style-{nomal|simple}[.-thumb-on]
  .p-pnLinks__item[.-prev|.-next]
    .p-pnLinks__link
      (.p-pnLinks__thumb)
      .p-pnLinks__title


//記事下コンテンツ
#after_article.l-articleBottom
  .l-articleBottom__section
    .l-articleBottom__title


//コメントエリア
.p-commentArea
  .p-commentArea__title .-for-[list|write]
  .c-commentList

ウィジェットエリア

旧クラス

.head_widget


.front_top_widget_area
.front_bottom_widget_area

.single_top_widget
.single_bottom_widget

.page_top_widget
.page_bottom_widget


//CTAウィジェット
.cta_area

//関連記事上・下
.before_related
.after_related


//フッター
.footer_widget_area[.footer_widget_col{n}]
  .box

新クラス

.w-header

.w-frontTop
.w-frontBottom

.w-singleTop
.w-singleBottom

.w-pageTop
.w-pageBottom

//CTAウィジェット
.w-cta

//関連記事上・下
.w-beforeRelated
.w-afterRelated

//フッター
.w-footer[.-col{n}]
  .w-footer__box