個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方法を記事にしておきたいと思います。
知人から「わかりやすく解説したものがほしい」と言われ、記事にしてみました。
わかりやすさを心がけたつもりですが、意味不明な部分も多々あるかと思います。
少しずつ改善していきますので、どうぞご容赦ください。
複数回にわたって記事にしています。
第1回目の今回は、WordPressをサーバーにインストールして、オリジナルテーマをつくるために必要なファイル群をアップし、基本的な設定を行うまでを記事にしています。

なお、「HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方法」には以下の記事があります。
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.1」=WordPressをサーバーにインストールして、オリジナルテーマをつくるために必要なファイル群をアップし、基本的な設定を行うまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2」=画像のパスの差し替え、カテゴリーの登録、パーマリンク設定、アイキャッチ画像の設定、投稿記事のタイトル表示までの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.3」=カスタムメニュー機能を利用してグローバルナビゲーションを設定して、SNSボタンを設定するまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.4」=index.phpを細かいパーツに分けたうえで、ページネーションを設定して新しい記事・過去の記事に自由に行き来できるようにし、index.phpのテンプレート化を完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5」=トップページに一覧表示されている投稿記事の中身(詳細)を表示するためのテンプレートsingle.phpを完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6」=ContactやAboutページといったいわゆる「固定ページ」を表示するためのテンプレートpage.phpを完成させるまでの記事
HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編」=WordPressを導入するなら最低限入れておきたいプラグインについての記事

この記事が、これからWordPressでオリジナルテーマを作ってみたいという方のご参考になれば幸いです。
注意:本文中に<?php 〜 ?>という記述がいくつも出てきますが、HTML文書の関係で、< >はすべて全角で記述しています。
利用される際には、全角の< >を半角の< >に変えてご利用ください。
全角まま利用すると、うまく機能しません。

HTML+CSSページとWordPressの違い

最初にHTML+CSSで作ったページと、WordPressで作ったページでは何が違うのかを見ていきたいと思います。

HTML+CSSは静的ページ

HTML+CSSで作ったページというのは静的ページと呼ばれます。
静的つまり動かないページを静的ページと呼びます。
なぜ静的かというと、ユーザーが何かアクションを起こしたとしても、ページを表示することしかできないからです。
ページ内容を変えたい場合は、制作する側がHTML+CSSの内容を更新する必要があります。
これとは反対に動的ページと呼ばれますものがあります。
文字通り動くページのことです。
たとえば、ユーザーがネットショップなどで買い物をするときに、商品を検索ワードに入れると、対象となる商品がズラリと並びますよね。
これは、ユーザーのアクション=リクエストに対して適切と思われる情報をサイト側が判断した結果をWEBページとして表示しているわけです。
このように、ユーザーのアクションによって、表示されるページが変わるページを動的ページと呼びます。

WordPressは動的ページ

HTML+CSSページは静的ページでしたが、WordPressは動的ページです。
つまりユーザーのリクエストによって、見せるコンテンツ内容が変化します。
この動的ページを作成するには、HTML+CSSだけでは作成することができません。
ユーザーのリクエストに対して適切な判断を下すためには、ユーザーのリクエストにWEBサイトが答えられる体制を整えておく必要があるのです。
その1つがサーバー側での処理です。
WEBサイトはレンタルサーバーなどを借りて公開しますが、そのサーバーでユーザーからのリクエストを処理させるのです。

PHPというプログラミング言語を使ってサーバーに処理させる

ではどうやってサーバーに処理させるのでしょうか。
ここで登場するのがPHPというプログラミング言語です。
PHPはサーバーでの処理を指示できるプログラミング言語で、こうした言語のことをサーバーサイドスクリプトと呼びます。
このPHPを使ってサーバー側に処理させます。
お問い合わせの入力フォームを利用したことがある方も多いと思いますが、このお問い合わせフォームの多くはPHPによって作成されています。

WordPressはPHPでできている

WordPressも、このPHPで作られています。
PHPで作られているわけですから、WordPressで作られたサイトはユーザーのリクエストによって、サーバー側で処理が行われ、リクエストに対応したページがユーザーに表示されます。
WordPressで作成されたサイトは、更新が非常にラクです。
コンテンツ内容を作成すれば、サーバー側が勝手に処理して、ページを表示してくれるようになるからです。
しかも、WordPressで記事を書けば、新しいページがどんどん作成され、該当するカテゴリーでは、自動的に古い記事の上に表示されるようになります。
たったこれだけのことですが、これらの作業をHTML+CSSだけでやろうと思うと、すべてを手作業で行う必要があるのでかなり大変です(Dreamweaverのテンプレート機能を使う場合は例外)。
イヤになります。
作業量が増えるわけですから、ミスも必然的に増えてきます。
その点、WordPressでは必要な部分だけ準備してやれば、あとは自動でページができてしまうわけですから、作業量が少なく、ミスも少なくなり、より多くの時間をコンテンツ作成に集中できるようになります。
少し前置きが長くなってしまいました。
次からは早速、HTML+CSSページをWordPress用オリジナルテーマにする方法を見て行きたいと思います。

制作の流れはHTML+CSSページの作成 → WordPress用オリジナルテーマ化

WordPress用のオリジナルテーマを作成するといっても、制作の流れはほぼ同じです。
まずはHTML+CSSページをつくてっから、そのページをもとに、PHPを使ってWordPress用オリジナルテーマにしていきます。

最終的なゴール

この記事でWordPressのオリジナルテーマとするのは以下のようなHTML+CSSになります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

COJIN SAMPLE

このサンプルは、MagneticというフリーのHTML5+CSS3テンプレートをもとに作成しています。
まずは、Magneticファイル一式をダウンロードしておいてください。

オリジナルテーマにしたいサイトをデザインする

実際の制作の流れに従って見ていきます。
まずは、オリジナルテーマにしたいサイトのデザインをしましょう。
ラフやワイヤーフレームを作成してからPhotoshopやSketchなどをのソフトを使って作成するのが一般的ですが、最近では、いきなりHTML+CSSを使って作成する手法も増えているようです。
やりやすい方法でつくってください。

HTMLでマークアップする

デザインが出来上がったら、HTMLでマークアップしていきましょう。
ファイル名はindex.htmlで作成します。
このindex.htmlを使って、後々オリジナルテーマにしていきます。
当記事では、Magneticのindex.htmlを利用しています。
そのindex.htmlを以下のように書き換えます。
書き換えた箇所は「<!– 書き換え –>」とコメントアウトしていますので、参考にしてみてください。

CSSで見た目をデザインする

続いて、CSSで見た目をデザインしていきましょう。
CSSのファイル名はstyle.cssというファイル名にします。
Magneticのcssフォルダに入っているmain.cssをstyle.cssという名前にリネームしましょう。
スタイルシートのファイル名については通常、規定はないですが、WordpressではメインとなるCSSファイルには、style.cssという名前をつけておく習慣になっています。

なお、Magneticファイルのなかには、style.cssのほかに、reset.cssというファイルがあるかと思います。
すでにご存知の方もいらっしゃるかもしれませんが、よく知らないという方のために簡単に説明しておきます。

ブラウザ間のデフォルト設定の差異をなくしてくれる設定reset.css

ネットを利用するとき、さまざまなブラウザソフトを利用していると思います。
ブラウザソフトはHTMLとCSSで書かれた文書を読み込み、解析してWEBページを表示しています。
このブラウザソフトがWEBページを表示するとき、制作者がCSSで指定していない要素については、ブラウザ独自のルールに従ってWEBページを表示します。
例えば、h1要素で文書をマークアップした場合、ブラウザによって文字の大きさや太さが異なって表示されます。
これは制作者側からすると非常に都合が悪いですよね。
こちらの意図したデザインと、まったく異なるデザインでページが表示されるわけですから。
reset.cssは、そうした各ブラウザソフトによって異なる解釈を一度「リセット」して、制作者意図するスタイルを、各ブラウザに対して等しく反映させるためのスタイルなのです。
個人的には、とても利用しやすいスタイルで、制作の際にはつねに利用しています。

リセットは必ずしなければならないというわけではない

ただし、reset.cssを使って、必ずリセットしなければならないというものではありません。
最近ではブラウザのもつデフォルトのスタイルを活かしたほうが、処理も早くなるなどの理由で、normalize.cssといったスタイルも多くの人に支持されています。
配布されいてる有料・無料のテンプレートをみても、normalize.cssを使っているものをよく見かけます。
reset.cssとnormalize.css。
どちらを利用するかは、製作者の判断に任されており、自分にあったスタイルを使用するといいと思います。
しかし、使用する際には、クセを理解したうえで使用するようにしましょう。
でないと、CSSで新しいスタイルを追加するときに、意図したデザイン結果にならない場合があるので注意が必要です。
この点でいえれば、すべてを「リセット」してくれるreset.cssのほうが、個人的には便利に感じています。

WordPress用オリジナルテーマを動かすために必要なもの

HTML+CSSで作成したページをWordPress用のオリジナルテーマに書き換えていく作業に入る前に、WordPressを動かすための準備を整えます。
WordPressを動かすためには、PHPに対応したサーバーが必要になります。
ローカル環境で作成する方法もありますが、こちらの記事ではレンタルサーバーを利用して作成することをオススメします。
レンタルサーバーを利用したほうが、ローカル環境で作成してから本番環境=レンタルサーバーで公開するよりも手間がかかりません。
というのも、ローカルと本番環境が完全に同じ条件の環境なら問題ないのですが、まったく同じにならない場合がよくあります。
ローカルではうまくいっていたのに、本番環境で公開した途端、表示がおかしい……、なんてことはよくあります。
個人で進める場合には誰に迷惑がかかるわけでもないので、いきなり本番環境で作成してみて、不測の事態に遭遇したとしても、きちんと対処できるようにしたほうがずっと効率的だし、レベルアップにもつながると思います。

レンタルサーバーはWordPressを自動でインストールできるものを選ぼう

レンタルサーバーを選ぶ基準としては、練習するだけなら格安サイトで十分でしょう。
ただし、格安サイトでもWordPressに対応したサーバーを選んでください。
なかでも便利なのが、WordPressのシステムを自動でインストールできるサーバーがオススメです。
WordPressはオリジナルテーマを動かくすためのシステムのようなファイル群があります。
これらをレンタルサーバーにインストールした上で、そのなかにオリジナルテーマを入れて、公開・運用していくという流れになります。
そこで、WordPressのインストールが必要になるわけですが、手動でできるものの、初心者には少々面倒で、時間もかかります
そんなものに時間を取られるよりも、デザイン的な部分やコンテツ部分に時間をかけるほうがはるかに効率的です。

設置できるデータベースの上限数も考慮に入れて

WordPressはPHPで動くわけですが、MySQLというデータベースとも連動して動作しています。
このデータベースにコンテンツがストックされており、ユーザーからのリクエストによって最適なコンテンツが取り出されて、サイトに表示されます。
そのデータベースに利用されているMySQLは、レンタルサーバーの契約内容によって、上限設置数が決まっています。
基本的に、WordPressは1つのサイトに対して1つのMySQLが必要になりますから、自分が設置したいと思うサイト数とデータベースの上限数が見合っているかを考えておく必要があります。

将来的な目標も考えてレンタルサーバーを選ぶ

WordPressを自動イントールできるレンタルサーバーを選ぶということのほかに、もう一つ重要な基準があります。
作成したサイトを将来的にどうしたいのかということです。
ただの練習だけなら、特に問題はないのですが、将来、多くのアクセス集める人気サイトに育てたいという場合には話が変わってきます。
レンタルサーバーのプランには転送容量と呼ばれる条件があります。
ユーザーがサイトを見るためには、画像や動画、HTML、CSSファイルなどのサイトを構成するページデータを訪問者のパソコンに「転送」する必要があります。
この転送されるデータ量のことを「転送容量」と呼びます。
格安レンタルサーバーの場合、この転送容量が非常に低いものがあります。
1日1GBとか、月間30GBとか。
こう聞くと、とても多いように思いますが、記事がバズっていきなり多くのアクセスを集めた場合、転送容量をオーバーしてしまうと、ページがスムーズに表示されないか、最悪の場合、まったく見られない状態になります。
私自身も同じ経験をしました。
格安のレンタルサーバーを借りて、練習がてらサイトを作成したところ、ひょんなことから順調にPV数を稼げるようになりました。
まさに嬉しい誤算!
それなのに!! ページがスムーズに表示されないどころか、まったく表示されないという自体に遭遇するようになったのです。
ユーザーにとっても迷惑をかけるし、私自身も非常に悔しい思いをしました。
そうした経験を踏まえ、現在では、転送容量に余裕があるエックスサーバーを利用しています。
当ブログももちろんエックスサーバーです。
動作が安定かつ高速であるため、以前の格安レンタルサーバーに比べ、とても快適です。

そのほか、高いPHP処理能力やサーバーの安定感が抜群なので、快適な閲覧環境を提供できます。
データのバックアップ、セキュリティ対策、サポート体制も充実しているので、格安なレンタルサーバーを利用して「遅いなあ」「よく落ちるなあ」といった不満をお持ちの方には、特におすすめしたい優良レンタルサーバーです。
取引先のお客様にも多数ご利用いただいています。



それでも格安を選びたいなら、エックスサーバー系列のミニーバードがおすすめです。
ミニバードはネットオウルという会社が運営しているのですが、2013年にエックスサーバーのグループ会社となりました。
信頼感のあるエックスサーバー傘下だけあって、安定感があり、サーバーの応答性もいいようです。
ミニバード独特の支払い方法が扱いづらいという点を除けば、使いやすいサーバーといえるでしょう。


レンタルサーバーにWordPressをインストールする

レンタルサーバー選びが終わったら、早速WordPressをインストールしましょう。
私がエックスサーバーを利用している関係で、エックサーバーを使って解説したいと思います。

ドメイン設定を行う

まずは、WordPressをインストールするためのドメインを設定しましょう。
ドメインはレンタルサーバー契約後に自動的に付与される初期ドメインか、お名前.comをはじめとするドメイン業者を利用して取得したドメインを利用します。
co-jin.netの場合は、お名前.comを使って取得しましたが、今回は別のドメインで設定を行います(詳しい内容は「無料のドメインを取得してレンタルサーバーに設定する方法」をご覧ください)。
「サーバーパネル」のトップページから、「ドメイン設定」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「ドメイン設定」画面の「ドメイン追加設定」タブをクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

ドメインを入力して、トップレベルドメイン(.com)などをプルダウンメニューから選択します。
入力できたら「ドメインの追加(確認)」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

内容の確認画面に移るので、問題なければ再度「ドメインの追加(確認)」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

登録内容が表示されます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

サーバー内のフォルダ構成をみると、すでに登録したドメインのフォルダが形成されています。
あとは、ネット上で登録したドメインが正式に反映されているかどうかになります。
問題なければ、数十分〜数時間のうちにサーバー側でのドメイン登録が完了します。
試しに、ブラウザソフトを開いて、登録したドメインを入力してみてください。

「自動インストール」を利用してWordPressを簡単にインストールする

WordPressは通常、一式をローカルにダウンロードしてから、PHPとMySQLが使える環境のレンタルサーバーにアップロードして利用しなければなりません。
WordPress公式サイトから、WordPressの最新バージョンをダウンロードして、手動でサーバーにアップロードしてインストールするという流れです。
しかし、設定が面倒なので、レンタルサーバーで準備されている「自動インストール」などの無料ツールを利用するのがオススメです。
エックスサーバーにも「自動インストール」ツールがありますので、早速利用しましょう。
まずは、「サーバーパネル」にログインします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

続いて、「ドメイン選択画面」から対象となるドメインを選びます。
すでに設定したドメインの「選択する」をクリック。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「自動インストール」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

自動インストールの画面に移るので、「プログラムのインストール」というタブをクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

自動インストールできるCMSの一覧が表示されるので、その中から「WordPress 日本語版」の「インストール設定」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

すると、以下のような画面に切り替わるので、内容を記入していきます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

インストールのURL

エックスサーバーの場合、サイトのファイルの置き場所が決まっています。
ドメイン直下にあるpublic-htmlというフォルダです。
WordPressもこのpublic-htmlにインストールする必要があります。
しかし、インストールURLのディレクトリには何も記入しません。
記入しなくても、自動でpublic-htmlにインストールされます。

ブログ名

ご自身のブログ名を記入します。
あとからでも変更できますが、最初から決めておくとラクです。

ユーザー名

ご自身の設定するユーザー名を入れます。
何も入れないと、すぐに見破られるユーザー名が設定されるので、絶対に変更するようにしましょう。
忘れないようにメモもしておきます。

パスワード

容易に推測されやすいパスワードはやめましょう。
パスワードもメモしておきます。

メールアドレス

WordPressを運用しているとWordPressからメールが届きます。
主にアップグレードに関するメールですが、確認しやすいメールアドレスを設定しておきます。

データベース

新規でサイトを作るので、「自動でデータベースを生成する」にチェックを入れます。
以上の入力が完了したら「インストール(確認)」ボタンをクリックします。
確認画面が表示されますので、内容に間違いがなければ、再度、「インストール(確認)」ボタンをクリックします。

WordPress用のユーザー名やパスワードのほか、データベース名やデータベース用のユーザー名・パスワードも表示されますので、データベースのバックアップを取る場合などに必要になりますので、しっかり控えておきます。

実際にWordPressの管理画面に入ってみる

自動インストールが完了した画面で、リンクが貼られたURLがありました。
これがWordPressの管理画面に入るためのURLになります。
控えておかなくても、
「設定ドメイン/wp-admin/」
と入力すれば、管理画面の入り口が開きますよ。
このように、WordPressは簡単に管理画面が推測できます。
ユーザー名やパスワードは慎重に設定しましょう。
それはさておき、URLにアクセスして、以下の画面が開けば、WordPressのインストールが完了ということになります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

試しに、先ほど設定したユーザー名とパスワード入力しましょう。
無事にログインできたでしょうか。
ログインできると、下のような画面が開きます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

お疲れ様でした。
オリジナルテーマを使用しない場合、このままWordPressの管理画面を使って、コンテンツを入力・作成できるようになります。

コンテンツ作成の仕方については、「WordPress記事作成マニュアル:クライアント向けをInDesignで作成しました(無料です。ご自由にどうぞ) 」をご覧ください。

WordPress用オリジナルテーマをつくるために必要なもの

オリジナルテーマをつくるにあたって、いくつか必要なものがあります。
といっても、すでにコーティングが終了したHTMLとCSSファイうがあれば、ほぼ揃っているようなものです。
必要なものは以下のとおりです。

index.php
style.css
screenshot.png

先ほどダウンロードして書き変えたMagneticのindex.htmlとstyle.cssファイルを書き換えていきます。

index.phpを作成する

いきなりPHPという拡張子が出てきて驚かれる方もいらっしゃるでしょう。
ご心配なく。
index.htmlの拡張子を、index.phpに書き換えるだけOKです。
これだけで、サーバー側で動作するPHPのプログラムファイル名に変身しました。
(中身はHTMLなので、サーバー側で動くことはありませんが……。)

style.cssの内容を書き換える

スタイルシートは少しだけ手を加えます。
style.cssを開いて、以下のようにテーマの設定をCSSの1行目に記述します。
Theme Name: となっているところが、オリジナルテーマの名前になります。
わかりやすい名前でもいいですし、こだわりのある名前でも、何でも構いません。
また、CSSファイルの中身も少しだけ書き変えておきます。
フォントファイルや画像ファイルのパスのところで、「../fonts/raleway-regular.eot」「../img/sm.png」と「../」となっていますが、オリジナルテンプレート化する際に、ディレクトリが変わるので、この部分を削除しておきます。
書き変えた部分については「/*書き換え*/」とコメントアウトしていますので、参考にしてみてください。
注意:/*Inner page*/ と/*Map/Contact page*/という部分については、今回の記事では利用しないので、省いて解説しています。)

スタイルシートの準備は以上で完了です。

スクリーンショットを準備する

最後に、テーマのスクリーンショットを準備します。
絶対にオリジナルテーマの画像でなければならないということありません。
下記のように、「オリジナルテーマ」とタイトルを入力しておいてもいいでしょう。
サイズは300×225pxで大丈夫です。

HTML+CSSページをWordPress用オリジナルテーマにする方法

index.php、style.css、screenshot.jpgを一つのフォルダに

新規フォルダを作成し、名前をオリジナルテーマ用に変更しましょう。
index.php、style.css、screenshot.jpgがフォルダに入っていることを確認して、フォルダ名にstyle.cssファイルに記入したTheme Name: の名前をつけます。
この記事では「co-jin-sample」というフォルダ名としておきました。

HTML+CSSページをWordPress用オリジナルテーマにする方法

フォルダ名に深い意味はありませんが、オリジナルテンプレートと同じあるいは似た名前にしておくとわかりやすいでしょう。
以上でオリジナルテーマのスタート準備が整いました。
次は、作ったオリジナルテーマフォルダをWordpressにアップしましょう。

オリジナルテーマが入ったフォルダをWordPressにアップする

「co-jin-sample」フォルダをWordpress内にアップします。
ファイルをアップするには、FTPソフト(ファイルをサーバーにアップ/ダウンロードするためのソフト)が必要になります。
FTPソフトをお持ちでない場合は、インストールしましょう。
無料のFTPソフトであれば、「FFFTP 」や「FileZilla」が定番です(どちらもWin向け)。
私が個人的に愛用しているMac用コーディングソフト「Coda」にはFTP機能もついていますので、新しくソフトを入れる必要はありません。
レンタルサーバーの管理画面から操作できるFTPサービスも利用できますが、ファイルを一度に操作できないなど、非常に扱いにくいので、別途FTPソフトを利用しています。

FTPソフトからサーバーにアクセスする

FTPソフトがインストールできたら、FTPソフトを使ってサーバーにアクセスします。
アクセス方法はどのソフトでもだいたい一緒で、レンタルサーバーと契約したときに付与される情報を使ってアクセスします。
私が利用しているエックスサーバーの場合、サーバ申し込み後、「サーバアカウント設定完了のお知らせ」というメールが届いているはずです。
そのメール中にFTPアカウントの記載があります。

サービスコード:******
サーバーID:xsample
パスワード:********
サーバー:sv120 サーバー ※人によって変わります。
サイトのURL:https://xsample.xsrv.jp/
FTPホスト:xsample.xsrv.jp
Mailサーバー:xsample.xsrv.jp
初期FTPアカウント設定
FTPサーバー名(ホスト名) 設定完了メールに記載されている「FTPホスト」を入力してください。
例) xsample.xsrv.jp
ユーザー名(アカウント名) 設定完了メールに記載されている「サーバーID」を入力してください。
例) xsample
パスワード 設定完了メールに記載されている「パスワード」を入力してください。

FTPソフトを使ってファイルをアップする

無事にレンタルサーバーとアクセスできたでしょうか。
アクセスに成功したら、WordPressをインストールしたフォルダを開きます。
当記事では「エックスサーバー内のco-jin-sample.ml/public_html」フォルダにwordpressをインストールしましたので、このpublic_htmlフォルダを開きます。
開くと以下のような構成になっており、たくさんのファイルが並んでいるのがわかります。

HTML+CSSページをWordPress用オリジナルテーマにする方法

このファイル群のうち、「wp-content」フォルダを開きます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「wp-content」フォルダ内に、「themes」フォルダというものがあるのを確認します。
「themes」フォルダを開いてみましょう。
開くと、さらにまたいくつかのフォルダが入っています。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「twentythirteen」「twentyfourteen」「twentyfifteen」とありますが、これはWordPressにデフォルトで入っている無料のテーマです。
オリジナルテーマを作らないで、コンテンツを作成した場合、最新版のWordPressだと自動的に「twentyfifteen」というテーマを使って、コンテンツが表示されるようになります。
当記事の目的は、上記以外のオリジナルテーマでコンテンツを表示したいわけですから、「themes」フォルダのなかに、先ほどフォルダ名を書き換えた「co-jin-sample」をフォルダをアップロードします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

こうすることによって、WordPressの管理画面から「twentythirteen」「twentyfourteen」「twentyfifteen」以外のテーマを選択できるようになります。
試しにWordPressの管理画面を見てみましょう。
https://co-jin-sample.ml/wp-admin/から、WordPressにログインします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

左のメニュー「外観>テーマ」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

すると、「twentythirteen」「twentyfourteen」「twentyfifteen」などのテーマの中に、先ほどアップしたscrenshot.jpgの画像が見えると思います。

HTML+CSSページをWordPress用オリジナルテーマにする方法

ようやくオリジナルテーマを作成するための準備が整いました。
ここで、テーマを選択してやれば、テーマを自由に切り替えることができます。
ただし、現段階でオリジナルテーマを選択しても、うまく表示されないのでご注意ください。

WordPressで基本設定を行う

オリジナルテーマを作成するまえに、WordPressの管理画面で基本設定を行いましょう。
WordPressの管理画面を見てみましょう。
ログイン画面から、WordPressにログインし、ダッシュボードを開きます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

一般設定を行う

左メニューの「設定>一般設定」を選び、一般設定画面を開きます。
HTML+CSSページをWordPress用オリジナルテーマにする方法

「サイトのタイトル」「キャッチフレーズ」を記入しましょう。
「サイトのタイトル」はtitleタグに入り、 「キャッチフレーズ」はmetaタグのdescriptionに入ります。
入力が完了したら「変更を保存」をクリックします。

HTML+CSSページをWordPress用オリジナルテーマにする方法

表示設定を行う

続いては表示設定を行います。
左メニューの「設定>表示設定」を選び、表示設定画面を開きます。

HTML+CSSページをWordPress用オリジナルテーマにする方法

「1ページに表示する最大投稿数」には、12件としました。
サンプルが12件となっているためです。
好きな数で構いません。
また、トップページには最新の記事を表示する予定なので、「フロントページの表示」 では、「最新の投稿」にチェックを入れておきます。
設定が完了したら「変更を保存」をクリックします。

これで簡単な設定が完了しました。
次回からオリジナルテーマにするための書き換え作業を進めたいと思います。

なお、完成した場合のトップページは以下のようになります。

COJIN SAMPLE

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 3
  • 10

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適!テーマをより探しやすくした検索サービス「ThemeBro」

WordPressのテーマ検索に最適な、テーマ検索に最適化された検索サービス「ThemeBro」をご

記事を読む

レスポンシブに対応したWordPress用テーマ90+(2014年ベストテーマ)

レスポンシブに対応したWordPress用テーマ90+(2014年ベストテーマ)

レスポンシブWEBデザインに対応したWordPress用テーマをまとめてご紹介します。 今回ご紹介

記事を読む

エックスサーバーを使ってWordPressをサブディレクトリ型でマルチサイト化する:既存サイトがルート直下にある場合

エックスサーバーを使ってWordPressをサブディレクトリ型でマルチサイト化(1つのWordPre

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.2

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

WordPress記事作成マニュアル:クライアント向けをInDesignで作成しました(ご自由にどうぞ)

WordPress記事作成マニュアル:クライアント向けをInDesignで作成しました(無料です。ご自由にどうぞ)

WordPress記事作成マニュアルをInDesignで作成しました。 知り合いのサイトをWord

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.7プラグイン編

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.6

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ50(2015年版)

無料で利用できるキレイなデザインのWordPressテーマ2015年版をご紹介します。 WordP

記事を読む

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用オリジナルテーマにする方法vol.5

HTML+CSSページ(レスポンシブWEBデザイン)をWordPress用のオリジナルテーマにする方

記事を読む

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグ15

WordPressのカスタマイズでよく使うWordPressのif文と条件分岐タグを、個人的にまとめ

記事を読む