wordpressのテーマ作り

WordPressのテーマ変更したら軽くなった~自作テーマ

投稿日:

ブログがいつの間にか遅くなっていた。気づいたら3秒台。

もろもろ考えたあげく勉強も兼ねて簡単なWordpressのテーマを作ってみることにした。

参考

テーマの作成方針

テーマをつくるための方針はつぎのとおり

  1. トップページはなるべくたくさんの記事が俯瞰できるようにしたい
    Twitter Bootstrapのグリッドを使えば簡単だろう?ってことでグリッドシステムをつかう。トップは新聞の見開きのようなイメージで。たくさん記事がみられるようにする。記事絞り込みのリンクをたくさんおいてカテゴリーやタグ別に記事を絞り込みやすいようにする。
  2. 個別ページはコピペしやすいように横1920の半分のブラウザでみやすいように
    基本的に個別ページはコピペしやすいようになるべくそのままコードを貼りつけて、直す必要があるところはすぐわかるように全角カナを使うようにしている。Windows7ならWindowsキー+左右でウィンドウを右半分左半分の大きさにすることができる。残りの半分にエディタをおけばコピペしやすい。
    そうした使い道でサイドメニューがあると狭い。なので基本的にワンカラムにして下にコントロールをおくことにした
  3. カテゴリーページは目次みたいに利用して、タグは索引みたいに利用したい
    カテゴリーとタグの使い分けっていうのはよくわからないけど、カテゴリーは記事のまとまり連載企画みたいのを抽出したいときに使う、タグは記事内で使っているアーキテクチャをぜんぶ書いておいてアーキテクチャごとに調べたい時に抽出しやすいようにする(これは今後の課題)

トラブルと対策

テーマは参考書を読んだら作れたけど、詰まったところは次のところ。

  1. 本番環境でテーマ適用したら真っ白
    VirtualBOXで本番環境と同じ環境(nginx+php-fpm+mysql)を構築して開発した。仮想環境では問題ないのに本番環境ではなぜか真っ白。管理画面にはアクセスできたので、結局、プラグインをぜんぶオフにして順番にオンにし直すことで原因を特定した。デバッグプリントを出すのも有効かもしれない。
  2. Twitter Bootstrapのドロップダウンメニューを使えない
    メニューはwp_nav_menuで出すのだけれど、引数でulにクラスをあてるのとドロップダウンのためのa要素をうまく出力できなかった。というより、ちょっとやって早々にあきらめてjquery+cssで作ることにした。といってもスクラッチじゃなくてどこかのページを参考に。後で気づいたけどメニュー名を決め打ちでjsとcssを作っていたので流用がきかない。配色はテスト用においた色がツボにはまったのでそのままにした。そのうちグラデーションとかオパシティとかつけるかもしれない。
  3. jQueryを使うプラグインがうまく動かない
    自作のテーマでjQueryを使うことになったのだけど、うまく動かない。WordpressでjQueryを使うときはwp_headを使うんだけど、なぜかドロップダウンメニューが機能しない。直接jqueryのCDNを使うと自作のドロップダウンメニューは動くけれど、プラグインが動かない。結局、自作のメニューが$を使っていてエラーを出していたので、function($)で囲ってjQuery(document)から呼び出したらドロップダウンメニューもプラグインもうまく動いた。

まだ時々遅くなる気がするけど少し様子をみる。月500円のサーバだとそろそろこれが限界かな。

 

参考

ドロップダウンメニューはこのページを参考にした

Sexy Drop Down Menu w/ jQuery & CSS

もとはセクシーなのにダサダサにしてしまってもうしわけない

-wordpressのテーマ作り
-,

執筆者:

関連記事

div要素全体をクリッカブルにしてリンクする~CSS

By: James Lee   WordPressのテーマを少しいじった ブロック要素の全体をリンク領域に設定する なにか別のもっと簡単な方法がCSS3であった気もするけど、とりあえず動いて …

no image

WordPressの検索窓に予測機能をつける~typeahead

Twitter BootstrapのJavascriptプラグインには検索フォームに予測機能をつけるtypeaheadというプラグインがあるので導入できるか試してみた。 1 searchform.ph …

Stinger5でWordPressブログのテーマを変更した

By: Mikhail Kamarov – CC BY 2.0 目次1 Stinger52 子テーマをつくる3 ヘッダー画像4 ファビコン変更5 日本語URLを使えるように6 適当に色など …

WordPressにページ内ナビゲーションをつけた~jQuery

      MediaWikiとかTwitterBootstrap2.1.0に新しくついたやつとかそんなイメージ 仕組みとしては投稿の<h2>要素を集めてきて …

Stinger3でWordPressのテーマつくった

By: The National Guard – CC BY 2.0 目次1 Stinger3ってどんなテーマ?2 子テーマをつくる3 ヘッダー画像を変える4 トップページを変える5 h2 …