【WPテーマ自作】UnderScoresの導入

WordPress

【WPテーマ自作】UnderScoresの導入

今のサイトは、既存のwordpressテーマを使用しているのですが、
やっぱり見た目はこだわりたいし
テンプレ感をあまり残したくないという理由から
勉強も兼ねて、wordpressのテーマ作りをしてみることにしました。

どうやって作っていくのかなと、色々調べてみて
1からテーマを構築するのはとても面倒そう・・・

なので

ベースになるphp周りの設定などが揃っていて
見た目だけゴリゴリにカスタマイズしていける
「Underscores」というテーマを導入することにしました。

今回やること

  1. 「UNDERSCORES」をインストールする
  2. 作成したテーマをwordpessに適用
  3. サイトを確認してみよう
  4. まとめ

UNDERSCORESをインストールする

テーマのインストールはこちらから

公式サイトに移動し、「Theme Name」と書いてあるところに
作成したい自分のテーマ名を入れます。
今回はドメインと同じkemariiにしました!

あとは、「GENERATE」をクリック!!
先ほど入力したテーマ名で一式が入ったzipファイルがダウンロードできます!

zipファイルを解凍してみるとこんな感じ

おお〜!
functions.phpや、header.phpなど
テーマに必須なphpファイルが全て網羅された状態で作成されました!
これは便利…

サーバーでテーマのカスタマイズを行なっていく場合には
zipファイルをそのままwordpressのテーマ設定画面でアップロードしてしまいましょう。

※今回はwordpressの開発をローカル環境で行なって行くため、テーマの適用はもう少し後になりますが、先にこの記事で紹介します。

作成したテーマをwordpessに適用

管理画面の「外観」->「テーマ」から
「新しいテーマを追加」をクリック!

※この画面では既にテーマをアップロード済みなので、既にテーマが適用された状態になっていますが、デフォルトの状態だと「twenty-twenty」とかのwordpressが用意しているテーマが適用されているはずです。

「テーマを追加」の画面になるので
「テーマのアップロード」から、先ほど作成したUNDERSCORESのテーマをアップロードしましょう!

「ファイルを選択」から、UNDERSCORESのテーマを選択しアップロード。
「今すぐインストール」をクリック!

無事にインストールが終わったら、最初のテーマ画面に戻るので
今インストールしたUNDERSCORESのテーマを「有効化」します。

これで、テーマの適用ができたはずです!

サイトを確認してみよう

テーマの適用ができたら
どんな風になっているか一度サイトを確認してみます。

お、おぉ…
この通り完全プレーンな状態のサイトになっています。
ここからstylesheetをいじったりして、カスタマイズしていくわけですね。

サイドバーとかの基本のコンポーネントが揃っているのも嬉しいですね。
適当なcssフレームワークを当て込めば、
ある程度見栄えの良いサイトもすぐに作れそうです。

まとめ

今回は、wordpressのテーマを自作するのに便利な
「UNDERSCORES」というテーマのインストールから
テーマの適用までを行いました。

各種phpファイル(header.phpとかfunctions.phpとか)も入れて
テーマを1から開発していくのはとても大変な作業なので、
その辺りを解決してくれる「UNDERSCORES」はとても便利ですね!

次回は、テーマの開発をローカル環境で行なっていくために
ローカルでwordpressを簡単に構築できる
「Local」というアプリを導入します。

ピックアップ記事

  1. 【C97】冬コミ申し込みました!
  2. 【git】git logで変更ファイル名を確認したい!
  3. 【Rails】オブジェクトの中身をログに出力する
  4. 【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入
  5. 【C98】夏コミ申し込みました。

関連記事

  1. 【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入

    WordPress

    【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入

    前回は、プレーンなwordpressテーマを提供してくれる「UNDE…

  2. WordPress

    【その他】ブログのテーマを変えました

    ずいぶん久しぶりの更新になってしまいました...記事を見返してみたら…

カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

最近の記事

  1. railsをproductionモードで実行する
  1. その他

    WordPressに移行してみました
  2. 同人イベント

    【C97】冬コミ受かってました
  3. railsをproductionモードで実行する

    Ruby on Rails

    【Rails】railsをproductionモードで実行する
  4. WordPress

    【その他】ブログのテーマを変えました
  5. 【Rails】オブジェクトの中身をログに出力する

    Ruby on Rails

    【Rails】オブジェクトの中身をログに出力する
PAGE TOP