サイトのテーマをリニュアールしました
先年の最後の記事でテーマをリニューアルするという目的で考えていたリニューアルの要素をモリモリと導入して内容的にはかなり変わった。
スマホファーストを考えた設計
元々、モバイルファーストになることや、そもそももうiPhone5なんて対応したくないよ～と言う事でサイズ的にはiPhone5は足切りした。
まあ、発売から数年経過しているしスマホの対応寿命を考えると未だにiPhone5使っている人は物持ち良いな～という人だし。
あと、ページの遷移をスムーズにする事、どうせコメント貰えないなら、もっと遷移をしやすいようにするという目的のためにサイドカラムを復活させて読むエリアとみるエリアをわけて、導線を多様化してあげる事で便利になるかなと。
インフィニティスクロール入れたかったので導入
クライアントの要望を導入したサイトで比較検討したスクリプトで導入、クライアントのはマルチランゲージなので扱いが難しく、違うスクリプトで対応。
こっちはまあ、よくあるAjaxで対応。
コレで、記事を遷移しなくても次のコンテンツを読んで貰いやすくなたかなと。
ざっとスタイル併せて本来どうするか検討してなかったビジュアルコンポーザーの取り扱いについては、検証とかもしなくてはいけないので残しています。
廃止したこと
映画のコンテンツをプラグインを使ってアーカイブデーターとして取り込んでいたけど、どうにもプラグインをアップデートしてくれないし動作もあまり振る舞いがよくないので廃止。
ページ自体は消してないからインデックスは残っているけど、そうした資産は別の形で生かそうかなと。
まあ、どっちみち管理はカスタムポストで管理されていたわけなので、同名のカスタムポスト作ってあげれば対応出来るかなと。
カスタムしたテーマ
このテーマ自体は元々、マガジン系のテーマなので、Evanto のアイテム管理のために使っているWooCommarceの資産を生かすためにテーマをカスタマイズ。
テーマではプラグイン側のスタイルの読み込みを停止してオリジナルのスタイルを適応
// WooCommerce CSS削除してカスタム
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}オリジナルのスタイルは元々、テーマ本体にもなかったのでテーマ本体側で管理。
スタイルの読み込みはこんな感じで追記
function spegasus_styles() {
wp_enqueue_style( 'woocommerce', get_template_directory_uri() .'/assets/css/woocommerce.css', array() );
}
add_action( 'wp_enqueue_scripts', 'spegasus_styles', 15 );spegasus_styles って部分を自分のテーマのディレクトリにしてくれればこのまま使えるかと。
あとは、子テーマにwoocommerceというディレクトリを作ってプラグインのテンプレートをアップロードすればテーマで使えるようになります。
この辺りは以前にも書いているのでちょこっと応用ですね。
後は、ガリガリとCSSを書いたり、テンプレートを調整してあげる事で対応。
また、肝心なてんとしてグリッドをインライン方式からFlex方式に変更しました。
高さの調整などから解放されるので昨今ではこちらのやり方の方が多くのサイトでも紹介されているので、おススめです。
後は、ちょこちょこと気付いた毎に調整を入れたり、ビデオカテゴリを作ってビデオなどもそっちに集約して投稿フォーマットなども対応していこう。
ついでに入れたバイラル機能なども生きてくれるとうれしい。
