11フォローTwitterFacebookFeedlyRSSサイトデザインを自作テーマに変更しました。1152はてブ後で読むLINE購読するこんにちは、SHUMiSTです。Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第6回目です。前回は、既存のSimplicity(シンプリシティー)テーマに組み込まれているjQueryプラグイン(animatedModal.js)を流用して、STORK(ストーク)テーマのように検索ウィンドウをモーダルウィンドウで表示するカスタマイズを行いました。今回もハードルが高いですが、前回予定していたうちの一つ、ページトップのピックアップ記事スライダーを追加するカスタマイズを行います。追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。テンプレートファイルに変更を加える場合は親テーマの該当ファイルを子テーマのディレクトリにコピーし、子テーマで変更を加えましょう。第6回:ページトップに記事スライダーを追加しよう!jQueryカルーセルスライダー「slick.js」の入手function.phpにslick関係のCSS(スタイルシート)の呼び出しを設定function.phpにピックアップ記事スライダー用のサムネイル画像サイズを設定footer-javascript.phpにslick.min.jsの呼び出しを設定header.phpにピックアップ記事スライダー(slick)を表示するソースを追加メディアクエリに記事スライダーボックスのスタイルを追加メディアクエリにモバイル用の記事スライダーのスタイルを追加ピックアップ記事スライダーのスタイルを設定カスタマイズまとめ今回のカスタマイズ前後のスクリーンショット第6回:ページトップに記事スライダーを追加しよう!レスポンシブに強いjQueryカルーセルスライダー「slick.js」を使用して、ページトップに記事スライダーを追加します。jQueryカルーセルスライダー「slick.js」の入手まず、はじめにjQueryカルーセルスライダー「slick.js」の機能について一部ですが紹介しておこうと思います。無限ループ対応IE8以上のブラウザで完全動作などこの他にも様々な機能があり、高機能なスライダーになっております。詳しく知りたい方は、下記のslickの入手先を参照してください。下記の公式サイトページ下部より、slick関係ファイルをダウンロードします。more!kenwheeler.github.ioslick.js関係ファイルをアップロード上記の入手先よりダウンロードしたファイルを解凍します。下記の5つの必要なフォルダとファイルを探します。font(フォルダ)ajax-loader.gifslick.cssslick-theme.cssslick.min.js”slick”という名前のフォルダを作成し、上記5つのフォルダとファイルのうち”slick.min.js”以外の4つのフォルダとファイルをまとめて格納します。作成した”slick”フォルダを子テーマディレクトリ直下にアップロードします。”slick.min.js”を子テーマディレクトリ直下の以前(第5回)に作成した”js”ディレクトリにアップロードします。第5回のanimate.min.cssを追加した際に追加したadd_files()関数内に追加します。//ここに挿入します。);追加ソーストップページとフロントページのみslick関係のCSS(スタイルシート)を呼び出すように上記挿入箇所に追加します。既存のサムネイル(アイキャッチ)画像でも代用できますが、メディア設定により幅や高さが伸びて画質が粗くなる場合や無駄に大きいサイズの画像を縮小して表示するとページ読み込み速度などに影響がある場合があるので、設定をオススメします。サーバー容量を圧迫するのでご自身の判断で行ってください。Thumbnailsなどのプラグインでサムネイルの再生成が必要になります。https://ja.wordpress.org/plugins/regenerate-thumbnails/https://ja.wordpress.org/plugins/force-regenerate-thumbnails/追加ソースfunction.phpの最後に追加します。true);footer-javascript.phpにslick.min.jsの呼び出しを設定”footer-javascript.php”の最後に下記の”slick.min.js”ファイルの呼び出し設定(ソース)を追加します。追加ソース.slick-slider・・・スライダーの親要素に付与されているクラスその他のslick関係のオプションは検索したら、相当量の説明サイトがヒットするので各自参照してください。?>header.phpにピックアップ記事スライダー(slick)を表示するソースを追加トップページとフロントページのみカスタムヘッダー(#header)とメインカラム(#body)の間にピックアップ記事スライダーを表示するようにソースを追加します。ここに追加ソースを挿入します。id="body">追加ソース指定タグの記事(ピックアップ記事)を新着順に5件取得し、記事スライダー上にタイトル、サムネイル(アイキャッチ)画像・カテゴリを表示するソースになります。<p>ピックアップ記事がありません。<p>ピックアップ記事がありません。第3回で追加してある以下のメディアクエリ(1166px以上)の設定に記事スライダーボックスのスタイルを追加します。新しくメディアクエリ(480px以下)の設定を追加し、モバイル用の記事スライダーのスタイルを追加します。最後に、ピックアップ記事スライダーにCSS(スタイルシート)を使用して、スタイルを設定しデザインを整えます。追加ソース下記の追加ソースを子テーマのスタイルシート(style.css)に追加します。inherit;}カスタマイズまとめ今回のカスタマイズにより、カスタムヘッダーとメインカラムの間にピックアップ記事スライダーが追加されました。前回、今回とjQueryプラグインを使用したカスタマイズになっており、ハードルが高かったかもしれませんがピックアップ記事スライダーを追加したことによりサイト全体の雰囲気が変わり、STORK(ストーク)テーマにまた1歩近づいたと思います。次回は、メインカラムのデザインをCSS(スタイルシート)を使用して整えていく予定ですが、範囲が広そうなので分割して記事をお届けするかもしれません。Simplicity(シンプリシティー)テーマの元々の機能やソースを流用して、STORK(ストーク)テーマに近づけているため、STORK(ストーク)テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。STORK(ストーク)テーマの機能面などを利用したい方はSTORK(ストーク)テーマを購入してご利用ください。第5回:検索ボックスのモーダルウィンドウ表示編を読む第7回:記事一覧をシンプルタイプに変更編SimplicityをSTORK風にカスタマイズシリーズ目次へSimplicityWordPressPICKUPスポンサーリンクこの記事が気に入ったらいいね!しよう!最新記事をお届けします。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です。書いている人”SHUMiST(シュミスト/趣味人)”は自他共に認める「割と極度に面倒くさがり」です。人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はO型なんですけど「本当にO型?」とか言われることが多い。WEB関係に手を出したのかが自分でも疑問。