デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressオリジナルテーマを作ってみよう シンプルなブログサイト


こんにちは、koheiです。
WordPressには、色んなテーマファイルをインストールでき、自分好みのサイトにカスタマイズできますが、今日はそのテーマファイルを1から自分で作ってみようという記事です。
今回の記事では、以下のような必要な機能だけに絞ったシンプルなブログサイトを作っていきます。

本記事で作成するブログサイト

一応、ソースコードをコピペしても完成するように解説していますので、これから自作でWordPressサイトを作ってみようという方は是非参考にしてくださいね!

スポンサーリンク

作成するためのツール、環境を準備する

まずは、WordPressのオリジナルテーマ作成に必要なツール等を準備しましょう。

WordPressサイトを作成するのに必要なツール

  • ローカル環境(MAMP or XAMP)を構築し、WordPressをインストール
  • レンタルサーバー&ドメイン⇛(Webへ公開したい時)
  • エディタ(Atomがおすすめ)⇛コーディングで使用
  • FTPツール(※サーバーへファイルをアップするためのツール)

ローカル環境(MAMP or XAMP)

とりあえずWordPressサイトをお試しで作ってみたいなら、自分のローカル環境(PC)にMANP(Mac)/XAMP(Windows) をインストールし、ローカルPC上にWordPressをインストールすることをおすすめします。
以下記事で、ローカル環境構築の備忘録を記載してますので、参考にどうぞ。
WordPressローカル環境の構築 備忘録

レンタルサーバー&ドメイン

WordPressのオリジナルテーマを作成し、本格的にWebに公開したいなら、レンタルサーバー/ドメインを契約しましょう。
以下記事でレンタルサーバー&ドメインについて簡単に紹介しています。参考にどうぞ。
【初心者用解説】そもそもWordPressって何?

エディタ

実装する時に使うエディタを用意しましょう。PCに標準で入っているメモアプリでもよいのですが、せっかくなので実装に便利なツールを用意しましょう。
私のおすすめはAtomというエディタです。
Atom

FTPツール

作成したオリジナルテーマや修正ファイルをサーバーへアップする時に必要です。
Windowsならフリーソフトの「FFFTP」が有名です。
FFFTP

Macなら「Cyberduck」というソフトがおすすめです。
Cyberduck

テーマフォルダを作成

さて、必要な環境、ツールを揃えたら、次は、オリジナルテーマを作成するためのフォルダやファイルを準備しましょう。
WordPressのテーマを作成するには、最低限以下のファイルがあれば大丈夫です。以下から空のテンプレートファイルをダウンロードできます。

WordPressサイトを作るために最低限必要なファイル
  • index.php
    すべてのページ生成に使用される最も基本的なテンプレートファイルです。
  • functions.php
    WordPressの様々な機能を使いたい時、このファイルに処理を加えます。
  • style.css
    サイトをデザインするためのスタイルシートです。
  • screenshot.jpg
    WordPress管理画面からテーマ選択する際に表示されるサムネイル画像です。
  • テーマを有効化する方法

    作成したテーマフォルダをWordPressをインストールした場所内にある[wp-content]内の[themes]フォルダの中にアップロードします。(※ローカルPC環境の場合は、インストールしたWordPress内の同様の場所に配置しましょう。)

    WordPress管理画面の「外観」→「テーマ」を選択します。
    アップロードしたテーマファイルのサムネイル画像が表示されますので、選択して「有効化」しましょう。

    これで、実装前の準備が整いました。
    次からいよいよコーディングしていきましょう。

    スポンサーリンク

    いいね!を押すと、
    最新記事をお届けします。

    Twitter で

    ブログ用WordPress無料テーマ
    「chameleon(カメレオン)」

    WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
    初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

    ブログ用無料WordPressテーマ

    士業用WordPress無料テーマ
    「InomaExpertBasic」

    士業用の無料WordPressテーマを作成しました。
    もちろん、一般的なビジネスサイトに活用できます。
    自分でサイト更新したい方、
    これからホームページを立ち上げようとする方、
    自分でWordPressテーマを作ってみたい方、
    この無料テーマを是非活用してみてください。

    無料WordPressテーマ

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    ページトップボタン