WordPressオリジナルテーマを自作・変更しました!

今年に入って2度目のブログデザイン変更をしました。

無料テーマ「Stinger」シリーズのカスタマイズが楽し過ぎる&飽きっぽい性格のおかげで、これまで2〜3ヶ月に1度くらいの高頻度でデザイン変更をしてきましたが、今回はWordPressとプログラミングの理解をより深めるために、WordPressのテーマ(テンプレート)を自作してみました。

 

修正が必要な部分は多々ありますが、とりあえずは形になっているはず。

テーマの自作を思い立ってから、ある程度形になって、このブログに適用するまでが大体2週間くらいだと思います。

 

目次

僕がこのブログのテーマ製作をするうえで外せないポイント

今回テーマ製作をするうえで重要視したポイントが以下の通りです。

 

1カラムデザイン

最近増えてきているサイドバーを排除した1カラムデザインを取り入れてみました。

 

1カラムデザインにすることの大きなメリットは、「記事を集中して読んでもらえる」ということ。

サイドバーが無い分、意識が散らずに、記事に集中して貰えてより満足度を高めることが出来るようです。

 

ただ、その分平均PVは落ちるようですが、このブログの性質上、元々平均PVは高くなかったので、この部分は切り捨てて、思い切って1カラムにしてみました。

 

写真が映えるようシンプルな配色に

旅先の写真を多用するため、配色は白ベースで黒・グレー系の色を中心にしてみました。

文章があまり上手く無いので、より写真で誤魔化せるようなデザインに。笑

 

プラグインは出来るだけ使わない

周知のとおり、プラグインを多用するとページの速度が遅くなりSEO的にもあまり良く無いとされています。

なので、自分のブログに必要と思われるものは、出来るだけプラグインを使わずに埋め込めるように頑張ってみました。

 

サムネイルの種類を増やし過ぎない

前々回のカスタマイズの時にやりすぎたんですが、デザインを重視するあまりサムネイルサイズを増やしすぎてしまいました。

大した容量ではないとは思いますが、無駄にサムネイルが生成されるのも如何なものかと思ったので、少ないサムネイルサイズであちこち遣り繰り出来るように意識してみました。

 

前々回のカスタマイズはこちら。

 

管理画面内で完結できるような設計に

後からテーマ内のファイルを弄ったりしなくてもいいように、管理画面から色々設定出来るようにしたいです。

「オススメ記事」とか「各種コード」とか「CTA」とか・・・。

 

これは、現時点ではほぼ出来ていません。

管理画面の項目の設定の仕方がまだイマイチよくわからないんですよね。。

 

特に、「メニューに設定した投稿をサムネイル画像付きで出力する方法」とかわかる方いらっしゃいましたら是非教えて欲しいです。

 

現時点ではこんな感じ

現時点ではこんな感じになっています。

 

【WordPress】オリジナルテーマ

まずはトップページ。

ヘッダーが未だに素人感満載です。笑

記事一覧は4列の1カラムデザインにしてみました。
スマホだと2列の並びになります。

 

【WordPress】オリジナルテーマ

記事のページはこんな感じ。

まぁこの記事を見て貰えばわかりますが。笑

写真が横幅800pxとデカデカと表示されるようにしています。

 

【WordPress】オリジナルテーマ

こちらが記事下。

現時点でコメント欄は取り上げられるような代物ではありません。笑

関連記事・Pick up記事は、トップページ・記事一覧ページ同様、横幅いっぱい4列表示、次の記事・前の記事も形式は同じにして・サムネイルを節約してみました。(Pick upは関連記事の下にあります。)

 

【WordPress】オリジナルテーマ

そして、最後にフッター。

サイドバーを廃止した分、フッターのコンテンツを充実させました。

 

トップページ以外では人気記事・最新記事を、トップページでは人気記事のみ表示されるようにしています。

人気記事も有名プラグイン「WordPress Popular Posts」を使わずに、表示されるようにしてみました。
ただ、今のところ動作が怪しく、アクセス数が上位なはずの無い記事が表示されてしまってます。。

 

また、デモサイトである程度形を作って、実際にこのサイトで有効化してみたらカテゴリが多過ぎてアンバランスになってしまったので、この辺はまた少し変更しないといけませんね。

 

ページの表示速度

試しにページの表示速度を調べてみたら酷い有様でした。笑

 

PageSpeed Insights

【WordPress】オリジナルテーマ

【WordPress】オリジナルテーマ

 

GTmetrix

【WordPress】オリジナルテーマ

 

最後に

今回テーマを自作してみて改めて、配布されている無料テーマの凄さを痛感しました。

「ブログを書くこと」に重きを置くなら、本当に無料テーマは十分過ぎるものだと思います。

 

 

そして、知識をより深めたいと言っておきながら、実は今回のテーマ製作はほぼネット上の情報を引っ張ってきて作りました。

知識が無くても「ネットの検索力」と「断片的な情報を繋げる力」があれば誰でもテーマ製作が出来てしまうようです。笑

無料テーマ「Simplicity」を公開しているわいひらさんのブログ「寝ログ」には、WordPressテーマ製作に重宝する情報が盛り沢山で本当にお世話になりました。ありがとうございます。

 

 

ということで、まだまだ細かなところは酷い状況ですが、ある程度形にはなった(つもり)ので、旅の再出発までに準備記事でも書きながら、綺麗に整えたいと思います。

ホント、カスタマイズばっかりしてて全然記事が増えない。笑

 

それでは、新テーマと合わせて「しばたび」をこれからも宜しくお願いします。

よかったらシェア!
  • URLをコピーしました!

コメントする

コメント一覧 (2件)

  • や~すごいね!そこまで行ってしまったとは。。
    参考にするので今後も頑張ってください☆

    • だいきさん

      お久しぶりです!
      コメントありがとうございます!

      まだ大雑把に作っただけで、修正箇所はたくさんあるんですけど、とりあえず出来ました!
      でも、ブロガーとして本当はもっと記事書かないといけないんですよね。笑

      この前だいきさんのブログも見ましたけど、
      落ち着くとか言わずに、一緒に中南米のキーワードで上位独占しに行きましょうよー!笑

daiki55 へ返信する コメントをキャンセル

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次