【テーマの自作】入門

WordPress初心者である私が実際にテーマの自作をしながら説明していきます。

自分が実際にやった経験を元に記載していくので、よければ参考にしていってください。

 

まずは入門編から。

 

色々WordPressのテーマの自作について調べると「簡単」とか書いてありますが、実際のところそこまで「簡単なもの」でもないような気がしました(笑)

まぁ、それでも全然やれるような内容でしたので、気長に、好きな音楽でも聞きながら、地道にやっていきましょう!!!

にほんブログ村のランキングに参加中

まずはとにかく作成してみる

 

WordPressのテーマを自作するためには覚えることがたくさんあります。

その1つ1つの手順や方法は結構簡単なのですが、やはり最初は覚えることが多くなってしまうので、すぐに飽きてしまいます。

 

ということで、まずはテーマの自作をするにあたり、ややこしい知識とかは置いておいて一先ず作成してみます。

とりあえず今は何も考えず、以下の操作を行ってみてください。

 

まず、WordPressのテーマを作成するには以下のファイルが必要になります。

結構数や種類も多いですが、それぞれのファイルが何の役割を持っているのかは今後のテーマの自作を進めていく上で少しずつわかっていくので、現時点でわかる必要はないです。

・404.php
・archive.php
・footer.php
・function.php
・header.php
・index.php
・page.php
・sidebar.php
・single.php
・style.css

 

必要なファイルは以上となりますので、まずはその多さにめげず(笑)上記のファイルを作成してみましょう。

あと、ファイルの中身はまだ空でいいですよ。

参考までに、私は中身が空のファイルを以下のようにして作成しました。

 

①適当なテキストエディタ(Windows標準のものであれば「メモ帳」、私は「sakuraエディタ」を愛用しています)で空のtxtファイルを10個作成します。

そして、それぞれのファイル名を変更します。

※その際、拡張子が「txt」だったものを「php」や「css」に変えましょうね。

 

はい、これで一先ずWordPressのテーマに必要なファイルは作り終わりました。

 

しかし、これだと後々何も表示されない画面が出るだけでつまらないので、まずは試しに「index.php」ファイルに「ここはトップページです。」という文言を入れてみましょう。

※phpファイルはテキストエディタ(Windows標準のものであれば「メモ帳」、私は「sakuraエディタ」を以下略)で開くことが出来ます。

 

そしてファイルの保存をするのですが、ここで1点注意が必要です。

 

phpファイルを保存するときには、文字コードを「UTF-8」にして保存しましょう。

 

そうしないと、文字化けして表示されることになってしまいます。

あとここで1つ覚えておいて欲しいのは、

 

index.phpが一番最初に表示される画面の内容を記載するファイルだということトップページになる

 

ということです。

それだけ覚えておけば、今は問題ないかと思います。

これでもうテーマの自作(トップページに「ここはトップページです。」と表示させるだけのテーマですが)は完了しました。

お疲れ様でした。

 

FTPソフトを使って作成したものをWordPress上に保存する

 

FTPソフ・・・・・・だめだ、もう意味がわからない。

大丈夫です(笑)なんか意味不明な英字3文字とか出てきてますが、全然難しいことはないです。

 

前項ではテーマを作成するのに必要なファイルを作成しましたが、今度はそれをWordPress上に保存する必要があります。

その「保存」を行うために必要になるのが「FTPソフト」という名前ってだけの話です。

「FTPソフト」には色々な種類のものがあるのですが、ここでは「無償で」「日本語が使える」FileZillaという名前のFTPソフトを導入して説明します。

 

まずはFileZillaの導入方法から。

 

FileZillaを導入するには、以下サイトにアクセスしてインストーラーをダウンロードする必要があります。

https://filezilla-project.org/download.php?show_all=1

 

インストーラーには色々な種類がありますが、それぞれのOS(MacやWindows等)に合ったものをダウンロードすればよいです。

尚、Windowsの場合は更に32ビット版なのか64ビット版なのかを調べておく必要があります。

ビット版を調べる方法はWEBで検索すれば出てくるため割愛しますが、一応私が使っているWindows10の場合は以下の方法で調べることが出来るようです。

 

①Windowsキー + Xキーを押し、表示されるメニューの中から「システム」をクリックします。

 

そこに記載されている「システムの種類」にビットの情報が出てきます(以下図は64ビット版を意味してます)

 

ダウンロードすればいいインストーラーがわかったら、それぞれのPCにあったものをダウンロードしましょう。

 

ちなみにexeのものとzipのものがありますがそこに大きな違いはありません。

確か、インストールに必要なものを根こそぎ保存しておくのがzipで、インストールに必要なものをネット上から引っ張ってくるのがexeだったでしょうか。

参考までに、私はダウンロードがすぐ終わるexeでやりました。

 

ダウンロードが完了したら、ダウンロードしたファイルをダブルクリックします。

 

すると、インストールの設定が始まります。

まずはI Agreeをクリックします。

 

Only for meを選び、Nextをクリックします。
※PCユーザーがたくさん作成されていて、尚且つその全PCユーザーがFileZillaを使うのであればAneone who uses this computerを選ぶ必要があるらしいですが、そういったケースはあまりないと思うので基本はOnly for meで問題ないと思われます。

 

どの機能をインストールするか決めます。

全てにチェックをつけてNextでよいです。

※ここでLanguage filesを選択しないと日本語化が出来ないらしいです。

 

クライアントの保存先を決めます。

特に何も変えずにNextで問題ないです。

 

・・・・・・この画面では、何を設定しているのか忘れました(笑)

まぁ、特に何も変えずにInstallで問題なかったです。

 

インストールが完了したら、finishでインストールが完了です。

 

以上でFileZillaの導入が完了しました。

お疲れ様でした!

 

これだけでも結構な仕事でしたが、あくまで目的は「WordPress上に自作テーマの作成に必要なファイルを保存する」ことですので、次はFileZillaの使い方について説明していきますよ。

少し疲れたということであれば、コーヒーブレイクでも1つ挟んでから次のやり方を見ていってくださいね(笑)

 

 

まず。

FileZillaを立ち上げると画面左上によくわからないアイコン(PC本体のアイコンかな?)があるのでそこをクリックします。

 

新しいサイトをクリックします。

 

接続設定の名称を決めます。

どんな名称でも問題ないですが、一目でみて「どこのサイトへの接続設定なのか」わかる内容が好ましいです。

参考までに、私は「kehalife」としました。

 

接続設定を行います。

ここが少し面倒なところになりますが、以下のように設定すれば問題ないです。

設定後は接続をクリックします。

プロトコル   :FTP – ファイル転送プロトコル
ホスト     :後述
暗号化     :明示的なFTP over TLSが必要
ログオンタイプ :通常
ユーザー    :後述
パスワード   :後述

ホストとユーザーとパスワードについてはWordPressをインストールしたサーバーによって異なります。

WordPressをインストールしたということは「Xserver」や「ロリポップ」などのサーバー契約を行っているはずなので、その契約時に送られてきたメールに記載されている・・・・・・はずです。

私はXserverで契約したので、以下のような形でメールで送られてきていました。

そのまま、

FTPホスト名(FTPサーバー名)がホスト
FTPユーザー名(FTPアカウント名)がユーザー
FTPパスワードがパスワード

を示します。

 

設定完了後、「接続」をクリックすると以下のような画面が出る場合があります。

そのときはOKで問題ないです。

 

これで接続設定が完了です。

うまくいけばWordPressの構成がFileZillaの画面右側に表示されます。

 

 

(もう少しでWordPress上にファイルを保存することが出来ます。頑張ってください)

 

 

FileZillaの設定でWordPressに接続したら、画面右側のWordPressの構成から「wp-content/themes」となっている部分を見つけます。

そこで右クリックし、ディレクトリの作成を選択します。

 

ディレクトリ名を設定します。

ここで設定した名称が「テーマのテンプレート名」になるため、わかりやすい名前にしましょう。

参考までに、私は「kehalife_theme」としました。

 

これで自作テーマのファイルを保存するためのフォルダ(ディレクトリ)の作成が完了です。

 

後は、一番最初に作成したファイルたちをそのフォルダ内に保存すればWordPressへの保存が完了です。

具体的な方法としては、

まず作成したファイルがあるフォルダを開き、下図の赤枠部分をクリックします。

 

そこに表示された文字をコピーして、FileZillaの左側にある「ローカルサイト」に張り付けEnterを押します。

すると、同じくFileZillaの左側にファイル一覧が表示されます。

 

あとはこの「左側に表示されたファイル」を「右側の自作テーマ用のフォルダ」にドラッグ等で突っ込めば保存完了です。

 

長い間、お疲れ様でした!

これで、自作テーマの作成は無事完了です。

 

 

適用する

これまでの手順で、

・テーマの作成
・作成したテーマ用のファイルの保存

を説明しました。

あとはそれをWordPressの管理画面から適用すれば、晴れて自作テーマがお目見えとなります。

適用の方法は、

 

まずは、画面左側にある「外観」内の「テーマ」をクリックします。

 

今までの手順を行っていれば、自分で作成したディレクトリ名のテーマがあるはずです。

それを「有効化」します。

 

これで自作テーマの適用は完了です。

試しに「kehalife.com」にアクセスしてみると・・・・・・。

 

index.phpに入力されている内容が表示されましたね。

あとはindex.phpやheader.phpにどんどん「どのような表示をさせるか」を記載していく、というわけです。

 

 

これで、自作テーマ作成までの大まかな流れがわかったかと思いますので、次回から地道に実際の作成を行っていきますよ!

※ちなみにテーマを変えたからといって過去に投稿した大事な記事がなくなるということはありません。

今まで使っていた元のテーマを「有効化」してあげれば元に戻りますので、安心してください。

スポンサーリンク