【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. 【WPテーマ自作】UnderScoresの導入
  4. 【Rails】オブジェクトの中身をログに出力する
  5. 【C97】冬コミ申し込みました!

関連記事

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

    WordPress

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

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

  2. WordPress

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

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

カレンダー

2020年7月
 12345
6789101112
13141516171819
20212223242526
2728293031  

最近の記事

  1. railsをproductionモードで実行する
  2. 【WPテーマ自作】ローカル環境でWP開発ができる「Local」の導入
  1. App

    【ツール開発】ポケモンの種族値と実数値を調べるツール – 1
  2. 【WPテーマ自作】UnderScoresの導入

    WordPress

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

    【CharattDB】勉強がてらアプリを作ってみる
  4. App

    【ツール開発】RailsのAPIモードでアプリ開発
  5. イラスト

    夏コミC94お疲れさまでした。
PAGE TOP