Simplicityを2.0.0βにバージョンアップしました。
最初に注意点として、Simplicity1.9.3などの1系のテーマカスタマイザーの設定は引き継がないので、注意が必要です。2系を利用するには、カスタマイザーでの再設定が必要です。
また、しばらくやりたいことをやり終えるまでβ版(人柱版)として、公開するので、「多少の不具合が出てもOK」という方のみ利用をお勧めします。
よほど重要なテンプレートファイルをカスタマイズしていない場合に限り大丈夫とは思いますが、仕様変更によりテンプレートファイルをカスタマイズしている場合は、PHPのエラーメッセージが出る可能性もあるのでご注意ください。
今回の主な変更点は以下です。
- 著作権表示をシンプルなものに
- Simplicityテーマのクレジットを削除
- テーマカスタマイザーの設定保存方法を統一(仕様変更のため要再設定)
- HTML5向けに要素をいくつか変更
- role属性追加 (※冗長ななroleは削除)
- セマンティック情報の追加
- トップページで「本文表示」にしているとき投稿をセクションで囲む
- 少しでも読み込みが早くなるようにCSSの@import利用を排除
- カスタマイザーのデフォルト値をいくつか変更
- カスタマイザーの設定項目のキャプションをいくつか変更
- 2.0用のオートアップデートJSONファイルの新規追加
- 『「人気エントリー」ウイジェットにWordpress Popular Postsを使う』機能の廃止(Popular Postsプラグインをインストールしたら自動的に人気エントリー」ウイジェットなどが有効になるように変更)
- トップに戻るアイコンフォントのデフォルトを「fa-chevron-circle-up」から「fa-angle-double-up」に変更
- スライドインメニューのデフォルトボタン名を日本語に変更
- header-css.phpを廃止(予定)してlib/scripts.phpで呼び出す方法に統合
- header-css-mobile-responsive.phpを廃止(予定)してlib/scripts.phpで呼び出す方法に統合
- header-javascript.phpを廃止(予定)してlib/scripts.phpで呼び出す方法に統合
- 「SNS固有シェアボタン」設定においてタイトル下「コメントボタン」の表示上の不具合修正
- HTML要素のIDが重複してしまっていた箇所を修正(独自ウィジェットを複数入れていた場合など)
- 不要な機能を削除(Wordpress Popular Postsを有効にする機能は、インストールした時点で有効になるように変更)
- pixiv埋め込みのモバイル対応(参考)
- コードの不要なコメントを人事削除
- コメントウィジェットの名前の不具合修正
- サイド追従シェアバーのセンタリングのズレを修正
- noticeが出るところを出来る限り修正
- 細かなデザイン変更
- 細かな不具合修正
デザインと機能はほぼ変わりませんが、Simplicity1系と2系は、別物と思って利用していただいた方がいいかと思います。
当サイトには既にSimplicity2が適用されています。
著作権表示をシンプルなものに
以前の著作権表示は、以下のような感じでしたが、
以下のようにシンプルなものに変更しました。
以前のような表記が良いという場合は、「外観→カスタマイズ→その他」設定項目の「ライセンス」で変更してください。
著作権の書式についての詳細は以下。
Simplicityテーマのクレジットを削除
以前はテーマのフッター部分に以下のようなクレジット表記がありました。
WordPress Theme Simplicity
けれどSimplicity2からはテーマのクレジット表記を削除しました。
これでよりフッターがシンプルになりました。
以前、クレジット表記を入れていたのは、アクセス解析のリファラーなどから、Simplicity利用サイトを拝見して、様々な利用にたいして不具合が出ていないかをチェックすることを主目的でつけていました。
ただ最近、ありがたい事に利用していただける方が増えたため、いろいろなSimplicity利用サイトを見ることができ、様々な利用状況の不具合確認が手軽に行えるようになったため、不要となりました。
というか、テーマのクレジット表記が、サイトの管理者のものと思われる方も少なからずいて、Simplicityを利用したアダルトサイトや、まとめサイトへの記事削除依頼が結構な数僕のところへ来るので、対応が面倒くさくなったというのもあったり。
あと、余計な記述がなくなることで、よりシンプルにしたかったというのもあります。
テーマカスタマイザーの設定保存方法を統一
以前は、get_theme_modとget_option両方使ってカスタマイザーの設定を保存していたのですが、get_theme_modを使って保存する方法に統一しました。
get_optionの利用を廃止した理由は以下。
- 古いページを参考にした古い書き方だった(Since 1.5.0 )
- 両者が混在しているとややこしい
- get_optionを利用した方法でnoticeが大量に出ていた
- 今後のコードの保守性のため(get_theme_modで書いた方が簡潔のため)
これにより、Simplicity1系から2系にアップデートするときは、テーマカスタマイザーで設定の再設定が必要になりました。
再設定が必要になる設定項目については後で書きます。
新しいHTML要素や属性を追加
以前からずっと、やろうとは思っていたのですが、CSSカスタマイズの互換性をできるだけ保つため、やっていなかったHTML5要素などの追加を行いました。
加えてセマンティックウェブ用の属性とrole属性も追加しました。
主な変更点は以下。
ヘッダー
<header role="banner" itemscope itemtype="http://schema.org/WPHeader"> <div id="header" class="clearfix"> ... </div> </header>
変更:headerタグと「role=”banner”」属性は意味がかぶって冗長になる(HTML5チェッカーで警告が出る)のでrole属性は削除しました。以下のnav、main、aside、footerも同様の理由で削除しました。
グローバルナビ
<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <div id="navi"> ... </div> </nav>
メインカラム
<main role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog"> <div id="main"> ... </div> </main>
フッター
<footer role="contentinfo" itemscope itemtype="http://schema.org/WPFooter"> <div id="footer"> ... </div> </footer>
その他
その他にも、HTML5要素、ロール属性、セマンティック属性などもいくつか追加しました。
要素の追加について
本来なら、HTML5要素などは以下のようにマージして追加した方が良いのかもしれませんがやめました。
<nav id="navi" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> ... </nav>
というのも、このようにすると、スタイルシートを書き換える必要がある部分が大量に出てきたからです。大量に書き換える必要があると、予期せぬ表示上の不具合が出る可能性があるので、結局周りを新しい要素で囲むだけにしました。
こうすることにより、CSSカスタマイズの互換性もかなり保たれるので、無理してまでマージする必要はないかなと。
lib/scripts.phpにCSSとJSの呼び出しを統一
header-css.phpとheader-css-mobile-responsive.phpとheader-javascript.phpに書かれてあった、CSSとjQuery(JavaScript)の呼び出しをlib/scripts.phpに1本化しました。
詳しい説明は省きますが、ここに全てを書いて、呼び出し順番をコントロールすることにより、以下のような順番でスクリプトを呼び出せるようになりました。
- 親テーマのstyle.css
- responsive-pc.css
- スキンのstyle.css
- 親テーマのmobile.css(responsive.css)
- スキンのmobile.css
- その他諸々のCSS
- カスタマイザーのCSS
- 子テーマのstyle.css
- 子テーマのmobile.css(responsive.css)
- 印刷用のCSS
- JavaScript関係の呼び出し
これにより、子テーマでのスタイルが最も優先されるため、より感覚的にCSSカスタマイズがしやすくなるかと思います。
1系までは、以下のような状態でした。
テーマカスタマイザーでのCSS編集 > 子テーマでのCSS編集
2系からは、以下のように子テーマの編集が一番優先されます。
テーマカスタマイザーでのCSS編集 < 子テーマでのCSS編集
子テーマで書いたCSSスタイルが、スキンよりも、カスタマイザー設定よりも優先されるため、以前よりは、CSSセレクターの優先度に気を使うことなくカスタマイズができるようになると思います。
あと、CSSの@importが不要な書き方にもしたため、微妙に高速化もしたとは思います。
トップページで「本文表示」にしているとき投稿をセクションで囲む
「レイアウト(全体・リスト)」の「一覧リストのスタイル」の「本文表示」にしているときは、これまでは以下のようにアウトラインが崩れていました。
これらは、Simplicityの構造上h1トップページに複数使用していたため、このようになっていましたが、それぞれの投稿をセクション要素で囲むことにより、以下のように意図通り表示されるよう修正しました。
Simplicity1→2への移行方法
Simplicity1→2への移行では、いくつか再設定が必要です。
子テーマや、設定の移行方法は以下になります。
まとめ
このような感じで、僕がこれまで修正したかった箇所を、2.0を機にガシガシ改善させていただきました。
今回の、バージョンアップにより、最も影響を受けるところは、やはりテーマカスタマイザーの再設定が必要ということです。
主な機能や、CSSでの設定などは、ほぼ今まで通りとなっているとは思います。
ただ、1系で適用していたCSSカスタマイズが2系でも適用されるかという保証はできませんので、1系と2系は、別物としてご利用ください。
しばらく開発に集中するため「1系から2系にバージョンアップしたら設定がおかしくなった」等のサポートはしばらくできません。自前で何とかできる方のご利用をお勧めします。
もちろん、不具合にはできるだけすぐに対処したいと思います。Simplicity2フォーラムに書き込んでいただければ幸いです。
とりあえず、今後は以下のような機能を追加予定です。
- Twitterのシェア数表示機能
- Analyticsのユニバーサルアナリティクスに対応出来ればと
- section系の要素使用の最適化
- 高速化できるところはできるだけ高速化したい
- 「ピンバックを受け付けない」機能の追加
- CTA(Call to Action)機能を付けれればと
- Simplicity2用のテーマスクリーンショットを作りたい
- Simplicity2子テーマ用のテーマスクリーンショットを作りたい
今回の、内部の大幅改修を機に、より良いSimplicityになればと思います。
これで、Simplicity1系の開発は終了しますが、当分はそのままでも全く問題ないかと思います。
Simplicity2のダウンロードは以下になります。