Habakiriでサイトを制作しているけれどもカスタマイズ方法で困っている！
HabakiriでのCSSクラス名やおすすめプラグインを知りたい！
という方向けの記事です。
私はweb制作の仕事（デザイン+プログラム）をしています。
ご依頼いただくことが多いのが、wordpressを使ったWebサイト+ブログのデザインと構築。
以前はwordpressテーマ（プログラム）をデザインに合わせて、一から全て自分で作っていました。
…でも、時間がかかるし、メンテナンスも大変。
スピードアップやクオリティアップを考えても、web制作に便利なテーマを探して改変するほうがよいなと感じています。
最近はHabakiriというテーマを使ってクライアントサイトを制作中です。
必要なものが揃っていて、カスタマイズもしやすくてとても良いテーマです。
ブロガーよりもweb制作者向けのテーマではないでしょうか。
詳細は以下から。
実際に制作して感じたカスタマイズポイントを記録しておきたいと思います。
Habakiriでweb制作して感じたカスタマイズポイント
1.子テーマでつくる
子テーマというのはベースのテーマの改変用にファイルを用意してつくるカスタマイズ用テーマです。
先日もHabakiriのテーマ更新がありました。
親テーマにプログラムを書くと。更新の際、自分が書いていた内容が上書きされてしまうことがあるので注意です。
Habakiri制作者の方が、子テーマの作成方法も丁寧に書いてくださっています。
また、子テーマフォルダに「screenshot.png」というファイル名の1200px×900pxの画像を入れるとテーマ選択の画面で、イメージ画像が入ります。
子テーマフォルダに「function.php」というphpファイルも作って入れておくと追加の機能が使いやすいです。
2.アクションフックかheader.php、footer.php（子テーマ）を改変して構成
メインのイメージなどが入るサイトのヘッダー部分やコピーライトやメニューが入るフッター部分。
実務になると、ここに文章を入れて欲しいとか画像を追加して欲しいとか、細かい指示が多くなってきます。
そういうときに便利なのが、アクションフックやテーマ改変です。
アクションフックはプログラム上のいくつかの場所に、文章や画像や一覧など、好きなコンテンツを追加できる方法です。（記事の前にこれを入れたいとか、ヘッダーの下に画像入れたいとか）
指示内容によっては、複雑に位置をかえたり、アクションフックで追加できない箇所もあります。（細かい場所に内容追加が入ったり）
copylight.phpやlogo.phpなどを編集すれば変更できる箇所もあるので、そちらをコピーして改変もOKです。
私は複雑な編集だったため、header.phpとfooter.phpを子テーマに複製して、直接改変しました。（テーマ更新時、再調整の必要が出る可能性はありますが…。）
また、各ページのヘッダー画像はCSSから調整可能です。
3.JSの追加方法
追加でjavascriptを使いたいことあります。
アクションフックを使って、fuction.phpからも入れられるそうです。
私は、header.php（子テーマ）の<?php wp_head(); ?>の直前に以下コード、function.phpに以下コードを入れました。（jsは子テーマ内にjsフォルダを作成し、その中に格納しています）
header.php
|
1 |
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/style.js"></script> |
<?php echo get_stylesheet_directory_uri(); ?>が子テーマのURLです。
functions.php
|
1 2 3 4 |
function my_scripts() { wp_enqueue_script( 'style', get_bloginfo( 'stylesheet_directory') . '/js/style.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_scripts'); |
4.記事一覧や記事見出しなどのCSSカスタマイズ
デザイン提案によって色が表示フォーマットが合わないこともあるかと思います。
habakiriのリンクはもともと青いのですが、
作ったサイトはテーマカラーが赤だったので、全体にCSSを追加変更しました。
以下、ブログ部分の調整で使ったCSSのクラス名です。
CSSクラス名一覧
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
/*ブログ記事*/ /*パンくずリスト*/ .breadcrumbs{ margin:; } /*パンくずリストのリンクテキスト*/ .breadcrumbs a,.breadcrumbs strong{ color:; font-size:; } /*ブログ記事のリンクテキスト*/ .blog a,.single a.blog a:hover,.single a:hover{ color:; } /*ブログページ全体*/ .blog #contents,.single #contents{ background-color:; } /*記事*/ .entry{ margin:; } /*記事タイトル*/ .entry .entry__title{ font-size:; background:; margin:; } /*記事タイトル_テキスト*/ .entry .entry__title a{ color:; } /*アイキャッチ*/ .entries .entry--has_media__text { background:; color:; top: 0px;/*デフォルトでtop:-2px；が入っています*/ } .entries .entry--has_media__text span { border:; } /*ページネーション*/ /*ページネーション_現在のページ*/ .pagination .current{ background:#b50606; border:1px solid #b50606; } /*ページネーション_数字の色*/ .pagination a.page-numbers,.pagination a.page-numbers:hover{ color:; } /*サイドバー、コメントのタイトル*/ .sidebar-widget__title,.comments h2,.comments h3{ font-size:; padding:; background:; margin:; color:; } /*コメント送信ボタン*/ .submit{ background:; } |
4.便利なwordpressプラグイン
ズボラな私が使った便利なプラグインです。
メンテナンスを考えるとプラグインは少なめがいいのかもしれませんが、
入れると、サイト制作のスピードがアップするのでありがたいです。
Widget Option
固定ページのみとか、記事だけとか、好きなページにWidgetを表示させられます。
設定が簡単で、ヘビーユーザーです。
Whats New Generator
今回初めて使いました。
希望のページに最新記事一覧を入れることができます。（固定ページ編集でショートコード挿入）
phpに書いて構築してもいいけど、プラグイン入れて一言書くだけでCSS込みで決まるのがありがたい。dl、dt、ddで入ります。
まとめ
ヘッダー部分やフッター部分をカスタマイズすると、構成の幅が無限に広がるなと感じました。
当分wordpressを使ったサイト依頼はHabakiriで対応したいと思います。
研究したらまだまだ、使っていない機能がたくさんみつかりそうです。
改善点を見つけたらこのページも再調整していきたいと思います。
1サイト作成ごとにいくらかお渡ししたいくらい、無料とは思えない便利なテーマでした
せめてアドオン買おうかな。
いや、まずせめて、サンプルサイトを今度作成し、さらに紹介記事を作成していきたいと思います。
