【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. 【CharattDB】勉強がてらアプリを作ってみる
  2. 【C97】冬コミ受かってました
  3. 【Rails】オブジェクトの中身をログに出力する
  4. 【git】git checkoutする時に、ベースブランチを指定する
  5. 【git】git logで変更ファイル名を確認したい!

関連記事

  1. WordPress

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

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

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

    WordPress

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

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

カレンダー

2021年1月
 123
45678910
11121314151617
18192021222324
25262728293031

最近の記事

  1. その他

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

    【C97】冬コミ申し込みました!
  3. App

    【ツール開発】RailsのAPIモードでアプリ開発
  4. Ruby on Rails

    【Rails】modelを作成する
  5. Ruby on Rails

    【Rails】ActiveStorageで添付ファイルを削除したいときは、pur…
PAGE TOP