57 views

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成①~準備~

はじめに

このブログでも姉妹ブログでも、私はwordpressを使っています。
wordpressのメリットの一つに、豊富なテーマがあるので知識がなくてもデザイン等切り替えができるというのがありますね。
このブログではみんな大好きstinger3のテーマを適用しています。
今回は、「オリジナルテーマを作ってみようじゃないか。」
そんな方のために何回かに分けて書いていきたいと思います。

オリジナルテーマを作りたいという方だけでなく、最低限の知識を身につけることで「既存のテーマをカスタムするときにも役立つ」、そんな記事にできたら嬉しいです。

「コピペでできる!!サクサクっとwordpressオリジナルテーマの作成」の狙い

・どんな人に役に立つか
>> オリジナルのテーマを作ってみたい
>> wordpressの使い方に慣れてきて、既存のテーマにもう少しオリジナリティのあるデザインを加えてみたい
>> html5,css3の知識が多少ある。
>> PHPってなに?わからないけど使ってみたい

・このシリーズでの目標地点
>> コピペでオリジナルテーマを作ってみる
>> wordpressをなんとなーく知る
>> ゆくゆくはビジネスサイト風のも作ってみる

対象は初心者向けなので、玄人さんはお帰り下さい。笑

スポンサードリンク

オリジナルテーマを作るときの準備

まずは準備です。
必要なものは、PC。もちろんです。
あると捗るのはファイル転送ソフト。

↓オススメFTPソフトはこちら↓
最新版!!オススメFTPソフト「WinSCP」のダウンロードとインストール、使用方法まで

テーマ用のフォルダを作成

まずはデスクトップ等任意の場所に「my_theme」というフォルダを作ります。

そして「my_theme」フォルダの中に「index.php」をテキストドキュメントで作成。
中身は空っぽで大丈夫です。

同じく「my_theme」フォルダの中に「style.css」をテキストドキュメントで作成。
style.cssの中身はこんな感じ

@charset "UTF-8";

/*
Theme Name: MY_THEME
Author: babyhood
Description: This is my theme.
Version: 1.0
*/

Theme NameやAuthorの箇所は任意の文字に変更してください。

最後に「my_theme」フォルダの中に「screenshot.png」というファイル名でサムネイル用の画像を用意します。

そこで設定した画像は以下のようにテーマを選択する画面で表示されます。
スクリーンショット_070115_125122_PM

フォルダをアップロードする

wordpressをご利用のサーバーにアクセス(またはFTPソフトを利用)し、「wp-content」フォルダの「themes」フォルダの中に、先ほど作成した「my_theme」フォルダをアップロードします。

スクリーンショット_070115_020845_PM

wordpressでテーマを適用させる

以上のことを終えて、wordpressの管理画面にログインし、外観>>テーマと進むと、先ほど作成したテーマが出てきますので、それを有効化させます。

スクリーンショット_070115_021223_PM

ここまででを準備段階として、次回に進みます。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 0 follow us in feedly

関連記事

紹介チケット

美容室ロゴ・看板・名刺デザイン

美容室のロゴ・看板・名刺デザインをさせていただきました。 ロゴ 4つ提案させていただき、こち

記事を読む

スクリーンショット_102814_094432_PM

XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る

はじめに またホームページ関連の内容になりますが、まずは前回までのおさらい。 先日こちらのブログ

記事を読む

スクリーンショット_110914_025524_PM

2カラム左ナビゲーションの別バージョンサンプル

はじめに 前回に引き続き、今回もホームページのレイアウトサンプルをご紹介いたします。 前回の

記事を読む

スクリーンショット_122815_033611_PM

クライアント向けにwordpressサイトを作ったときに役立つプラグイン10選

はじめに 今回はwordpressでクライアント向けにホームページやブログ等を作ったときに入れると

記事を読む

スクリーンショット_110814_063055_PM

2カラム左ナビゲーションのテンプレート

はじめに 今回は、札幌市格安ホームページ製作のbabyhoodで使用しているテンプレートのご紹介を

記事を読む

スクリーンショット_111114_020302_PM

1カラムの高級感あるデザインテンプテート

はじめに 今回は前回の2カラムとは違い、1カラムのホームページのレイアウトサンプルをご紹介いたしま

記事を読む

スクリーンショット_110514_104041_AM

WordPress (stinger3)の細かなカスタマイズ~ブログタイトルや記事内hタグ~

はじめに 今回は、当ブログ表示画面の細かいカスタマイズを行ったのでそのやり方をご紹介していきます。

記事を読む

スクリーンショット_060215_121053_PM

最新版!!オススメFTPソフト「WinSCP」のダウンロードとインストール、使用方法まで

はじめに ファイル転送のFTPソフトを探していて、使いやすさの点などでこのWinSCPというフリー

記事を読む

スクリーンショット_102514_125258_AM

Benri500札幌~新しいSEO対策について

Benri500札幌のご紹介 google検索では「札幌 激安 10分 500円」と検索す

記事を読む

03

GIMPで簡単!!よく使われている文字加工のやり方

はじめに 今回は、ホームページのロゴ部分や、見出し部分、画像の上に掲載する文字など、少し目立った感

記事を読む

2017-05-02_22h48_46
【iPhone】 チャット形式でSwiftが学べるcodebelle(コードベル)がすごい!!

はじめに app storeでプログラミングが学べるゲームが特集され

2017-05-02_11h36_35
【iPhone】 トライビットロジック~ゲームで学べるプログラミング~

はじめに app storeでプログラミングが学べるゲームが特集され

名称未設定
原始竜の黒い翼「ダイナ」を徹底攻略!!有名なデッキ編成も一挙まとめ

原始竜の黒い翼「ダイナ」 この記事はモンストの原始竜の黒い翼「ダ

スクリーンショット 2017-04-11 23.34.09
超簡単!! Macを使ってiPhoneの画面録画をする方法

はじめに 今回はMacPCを使ってiPhoneの画面録画をする方法を

2017-04-11_14h30_05
エンジニア・クリエーター必見の求人サイト!!レバテックキャリアとは

はじめに レバテックキャリアのスキルアップ記事の一つ、【プログラミン

→もっと見る

PAGE TOP ↑