【ダウンロード可】WordPress自作テンプレートを作成方法 | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

【ダウンロード可】WordPress自作テンプレートを作成方法

TECH

みなさんWordPressを使ってるとデザインを凝りたいと思ったことはありませんか?WordPressには標準でいくつものテンプレートがあります。

中にはおしゃれなものもたくさんありますが、思った通りのデザインにならなかったり、同じテンプレートを使用したサイトとデザインが似てしまったりします。

そこで今回はそんなテンプレートを使用してのデザインではなく、一から自作テンプレートで構築する方法を詳しく解説しています。また自作テンプレート用のベースファイルをダウンロードできるようにしているので、ぜひダウンロードしてみなさんのプロジェクトに生かしていただきたいと思います。

自作テンプレートのメリットやデメリットは他の記事で説明しているので、気になる人はこちらの記事も合わせて読んでみてください。

目次

  1. オリジナルテンプレートの作り方
    • WordPressをインストール
    • 自作テンプレートファイルをインストール
    • 管理画面よりテーマを切り替える
  2. まとめ

オリジナルテンプレートの作り方

それではここから実際にオリジナルテンプレートの作り方を詳しく解説していきたいと思います。

WordPressをインストール

それではまずWordPressをインストールしていきます。WordPressは常にアップデートされているので、常に最新版をインストールするようにしましょう。

WordPressをダウンロード

WordPressをサイトにインストールする方法は別記事でまとめているので、そちらを参照してください。

自作テンプレートファイルをインストール

WordPressがインストールできたら、自作テンプレートをWordPress内に入れていきます。

自作テンプレートを入れる場所は
サイト名/wp-content/themes
です。

このディレクトリにいくとデフォルトでいくつかテンプレートがあるので、それはすべて削除してください。

そして代わりに自作テンプレート用ベースファイルを入れます。ベースファイルはダウンロードできるようにしているので、ダウンロードして使ってください。

ベースファイルをダウンロード

WordPress自作テーマ

管理画面よりテーマを切り替える

続いて管理画面より自作テンプレートに切り替えていきます。

先ほどデフォルトのテンプレートを削除したので、エラー画面が出ていると思いますが、問題ありません。

管理画面にログインします。ログイン後
外観 > テーマより自作テンプレートを選択しましょう。

WordPress自作テーマ

これで自作テンプレートに切り替えができたので、サイトを見てみると、真っ白の画面になっていると思います。

これで下地が整ったので、あとはここに自身のデザイン通りにhtml、cssを記述していきましょう。

WordPress自作テーマ

まとめ

いかがでしたでしょうか?このように自作テンプレートを作成することができます。自作テンプレートを作りたいけど、どのように切り替えたらいいのか、どうやって作ったらいいのか、わからない人も多いのではないでしょうか?

今回解説した方法で、自作テンプレートを作るスタートラインに立つことができました。あとはhtml、cssでデザイン通りに構築していきましょう。

また今回配布したベースファイルはみなさんのプロジェクトで使っても問題ないので、どんどん活用してください。

また株式会社Esolabではオリジナルテンプレートでの開発を得意としております。お客様にあったデザインでサイト構築ができるので、ホームページ制作をご検討の場合は、お気軽にお問い合わせください。

この記事を書いた人

黒坂天翔

開発部 フロントエンジニア

アーカイブ

カテゴリー

  • TECH (34)
  • DESIGN (21)
  • OTHER (15)
  • MARKETING (6)
  • SEO (5)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ