WordPressテーマのベースを3つ制作!レスポンシブ対応でオプション機能付き♪

Create WordPress Theme
  • URLをコピーしました!

最初、WordPressテーマを自分で作ろうと思ったら、何から手を付けていいかわかりませんでした。
WordPressテーマ自作する人のために、「ブランクテーマ」というベース的なテーマが存在します。
今回は利用したブランクテーマCSSフレームワーク、そして実際に自作して公開しているWordPressテーマをご紹介します。これをベースにテーマを作ってみたい人向けなので、最低限の機能しか付けていません。
レスポンシブ対応でデザインを変更できるテーマオプション機能も付いていますので、参考になればと思います。

目次

絶賛公開中の自作テーマ

Under Strap

ブランクテーマの「Underscores」とレスポンシブ対応のCSSフレームワーク「Bootstrap」とを合わせたベーステーマです。
Bootswitch」でデザインを変更できるテーマオプション機能も付けています。

GitHub
GitHub - minoryorg/under-strap: WordPress basic template by Underscores + Bootstrap WordPress basic template by Underscores + Bootstrap - minoryorg/under-strap

Under Material

ブランクテーマの「Underscores」とレスポンシブ対応のCSSフレームワーク「Bootstrap」とマテリアルデザインの「Material Design for Bootstrap」を合わせたベーステーマです。
テーマオプション機能ではナビゲーションバーやサイドバーのカラーを変更できるようにしています。

GitHub
GitHub - minoryorg/under-material: WordPress basic template by Underscores + Bootstrap + Material De... WordPress basic template by Underscores + Bootstrap + Material Design - minoryorg/under-material

Under Flat

ブランクテーマの「Underscores」とレスポンシブ対応のCSSフレームワーク「Bootstrap」とフラットデザインの「Flat UI」を合わせたベーステーマです。
こちらもテーマオプションでカラーを変更できるようにしています。

GitHub
GitHub - minoryorg/under-material: WordPress basic template by Underscores + Bootstrap + Material De... WordPress basic template by Underscores + Bootstrap + Material Design - minoryorg/under-material

次は、どのブランクテーマとCSSフレームワークを作ったかを簡単に紹介します。

ブランクテーマ一覧

まずはブランクテーマを選びましょう。
ブランクテーマといっても種類がたくさんあり、ほぼ最初から作るものや、ある程度素材が揃っているもの、初心者から上級者向けまであるので自分に合ったものを選びましょう。

Underscores

ファイルやHTML(PHP)ファイルの構成がとても綺麗で一番のオススメです!
後に記述する自作テーマもこれを使用して作成しました。

Underscores
Underscores

Bones

とても有名なブランクテーマです。
ある程度揃っているので中級者向けに最適です。

Bones
Bones

Whiteboard

何もしなくてもレスポンシブテーマが出来上がっていて、初心者の方にオススメです。
ブランクテーマというより、ただのテーマっぽいです。

Whiteboard
Whiteboard

HTML5 BLANK

タイトルの通り、HTML5を使用した最先端のブランクテーマです。
自分で1から作りたいと考えている上級者向けです。

HTML5 BLANK
HTML5 BLANK

また、WordPressで用意テーマの中にもブランクテーマがあるようです。
WordPress管理画面からテーマの新規追加で検索してみてください。

WordPress.org 日本語
BlankSlate | WordPress Theme Directory Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully c...

ブランクテーマに追加したのも

Bootstrap

皆さんご存知、最も有名なレスポンシブ対応のCSSフレームワークです。
ベースはこれを使用しています。

あわせて読みたい
Bootstrap · The world's most popular mobile-first and responsive front-end framework. Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap
Bootstrap

Bootswatch

Bootstrapと一緒に使うことで、16パターンのデザインに変更できます。
自作テーマのオプション機能でデザインを切り替えれるようにしています。

あわせて読みたい
Bootswitch
Bootswitch

Material Design for Bootstrap

Bootstrapと掛け合わせることで、GoogleAndroid風のマテリアルデザインが実現できます。
書き方はBootstrapとほぼ同じなので、学習コストを削減できます。

Material Design for Bootstrap
Material Design for Bootstrap

Flat UI

これもBootstrapに掛け合わせるだけで、今流行のフラットデザインにできます。
上のと同じで、Bootstrapの書き方を変える必要はありません。

Flat UI
Flat UI

気に入ったらダウンロードして使ってみてください。
今回はデザインを中心に作成しましたが、次はアフィリエイト広告に強いレイアウトを中心に考えたベーステーマを作ってみたいと思います。

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

コメント

コメント一覧 (3件)

コメントする

CAPTCHA


目次