タグ: テーマ制作

  • 思うところあってテーマを一から作り直しました。

    思うところあってテーマを一から作り直しました。

    今まで使っていたテーマはテーマ制作という記事を書くために作ったため、使いやすさ・見た目が若干残念だったものをだましだまし使ってました。

    ちょっと気合いを入れてテーマ制作。IE8以下切り捨て。

    前回の記事更新日から2週間、夜なべしてなかなかカタチになったので変更。

    (トップはまだできてないものの)

     

    使ったもの

    css を 0ベースから書くほどの気合いはなかったんで、フレームワークを使いました。

    Foundation は有名なんで特に書くことはありません。

     

    IE8 以下切り捨ての理由

    Foundation 5 から IE8 切り捨て。

    Foundation 4 を使っても良かったんですが当ブログ最近のアクセスを見ると、

    最近のアクセス、ブラウザ別 Internet Exploler
    最近のアクセス、ブラウザ別 Internet Exploler

    ええと、IE8 以下は、

    13.26% x ( (22.17%+3.15%+1.58%) / 100 ) = 3.56694%。

    全体の 4% 以下なんでこれはもう、いいだろうと。

    ちなみに IE8 以下で見たらえらいことになります。

     

    こだわったところ

    • できる限りの microdata マークアップ
    • 目的のものに辿りつきやすいかどうか
    • 見やすいこと
    • プラグインを減らす方向で
    • ソーシャルボタンは公式のものを使わず、Jetpack のでまかなう。スクリプト削減+高速化。

    みたいなところですかね。

    php, html はフルスクラッチ。

    とりあえず思いつくままに組んでいき。

    作っている最中にどんどん横道に逸れていくのが愉快でもありました。

    アーカイブやカテゴリーの一覧が見やすくなったはず。

     

    ホホまとめ

    あとトップだけ仕上げたら記事を書けるかなーと。

    実際動かしてみると整ってないところ、気になるところがあるのでぼちぼち直しつつ。

     

    プラグイン作ったりしたんである程度見た目の説得力も持たせないとな…と思ったのも理由のひとつかも。

    「ここどうなってんねん」

    などあれば、記事にするのでコメントにでも書いてください。

  • WordPressのテーマを作る。テーマを作るための下準備・知っておいた方がいいこと。【テーマ作成 ⓪】

    WordPressのテーマを作る。テーマを作るための下準備・知っておいた方がいいこと。【テーマ作成 ⓪】

    テーマ、作ろうと思いまして。

    せっかくなんで色々順序を追って一通りできるまでを記事にしていきます。

    テーマ作成はローカル環境で行うため、既にローカルでWordPressが動いているひと向けです。

     

    WordPressのコーディングスタンダードをチェック

    コーディングスタンダードというのはまぁ簡単に言うと、

    「書き方は統一しようぜ!」

    です、インデントや空白の扱い、クラス名の命名規則等細かくあります。

    できるだけ則ったほうがいいので目を通しておきましょう。(全部書こうとしたんですけどCSSのところで3,000字超えたので別途いずれ)

     

    テーマ開発に必須なプラグインを入れる。

    テーマを作るなら必須です。

    Theme Checkでエラーが出まくる非公式テーマ、よく見ます。

     

    Theme-Check

    最新のWordPressに則った仕様になっているかテーマをテストするための開発ツール。

    Theme Check サンプル画像
    Theme Check サンプル画像

     

    Theme Check サンプル画像2
    Theme Check サンプル画像2

     

    Debug Bar

    デバッグモード有効時、管理バーにデバッグメニューを追加してくれます。

    クエリ・キャッシュ・および他の有用なデバッグ情報を表示。

    Debug Bar サンプル
    Debug Bar サンプル

     

    デバッグ情報が。
    デバッグ情報が。

     

    テーマ開発に便利なプラグインを入れる。

    必須、とまでは言わないですけどもあると捗るやつです。

    ぼくは入れてます。

     

    Debug Bar Actions and Filters Addon

    必須のところで紹介しました Debug Bar に Action Hooks と Filter Hooks の情報が追加されます。

    Action Hooks
    Action Hooks

     

    Filter Hooks
    Filter Hooks

     

    Show Current Template

    日本の方が作られたプラグイン。

    表示しているページで読み込まれているテンプレートファイルを表示してくれます。

    マウスホバーで
    マウスホバーで

     

    見られます
    見られます

    こんなところです。

     

    ホホまとめ

    海外製のテーマは英語だとしゅっとしてるんですけど日本語にするともっちゃりしてしまったり。

    色々弄ってると結局よくわからないことになったりしません?

    いっそのこと自分で作ってその過程で色々さらに勉強できるのでそうしようかと。

    次回よりテーマ作成進んで行きます。といってもまるごと1から作るのはさすがにあれなんでhtmlフレームワークを使おうと考えてます。

     

    某イベントで「WordPress公式ディレクトリに登録されていないテーマは危険!」という話があったようで。

    試しに色々と見てみましたら Theme Check でエラーいっぱい、デバッグモードでエラー吐く、などが見受けられ。

    あーあー…みたいに思うわけですよ。