WordPressに自作テーマを適用させる
丁寧モード
時短モードさて、この回では、早くもWordPressにあなた自作のテーマを適用させてしまいます。
まぁこれは正直“釣り”気味な言い方です。
適用したところで、ブログとしては全然使い物にならないので。
だってまだ「こんにちは」しか書いてませんからね。
でも、「こんにちは」だけでも1つのWordPressテーマとして設定できるということを体感してもらい、敷居の低さを感じてもらいたいんです。
自作テーマなんて、専門的なプログラミング知識が必要で、ハッカーやヲタクみたいに黒い画面にわけわからん文字をいろいろ書かないと動かないんだろうと思いがちですが、そんなことはないのです。
WordPressテーマとして成立する最小限のパッケージを作る
テーマとして最低限必要なのは、index.phpとstyle.css、それをまとめたフォルダです。
| index.php | 「こんにちは」を書いたもの。HTMLファイルとして作成してきたが、それをPHPファイルに変える。 |
| style.css | 文字の色とか大きさなど装飾系の命令をまとめたもの。 |
| フォルダ | フォルダ。 |
これらのファイルに対して3つの作業が必要です。
- cssにテーマであることを宣言する
- htmlをPHPファイルにする
- 1フォルダにまとめる
まず、（1）から。
CSSの一番最初に↓の文章を追記してください。
/*
Theme Name:好きなテーマ名
*/CSSにこれを書くことで、それを入れたフォルダの全ファイルが1つのテーマを構成するファイルと認識されます。
「好きなテーマ名」のところは自分の好きな名前でいいです。
日本語でもいいです。空欄でもいいです。
ここに書いた名前がWordPress管理画面でテーマを指定するときのテーマ名として使われます。
ただし、上下の変な記号（/*と*/）は忘れずに。
これがないだけで「壊れたテーマ」とみなされます。
次に、「2」。
HTMLをPHPにしましょう。
「html」なんてファイル名にないよ？という方は拡張子表示の設定から変更しないといけません。前回の記事を見てください。
ちなみに、「○○.php」はPHP言語で書かれたファイルという意味になります。
PHPは本格的なプログラミング処理が可能です。
以前、例であげた、昼は「こんにちは」という文字を表示させ、夜は「こんばんは」という文字を表示させなさい、といった命令を作ることなどができます。
HTMLだとこれはできません。
PHPにすることでより可能性が広がったわけです。
が、1つだけ注意があります。
それはブラウザで直接開けなくなること。
HTMLのときはファイルをブラウザに直接もっていけば中身が表示されましたが、PHPファイルになるとこれができなくなります。
突っ込んだ話をするとPHPはApacheというサーバーの上で動くから、それを通さずに直接ブラウザに持っていってもエラーになるから表示されないんだよ、的な話になるんですが、それを言って理解できる人は最初からこのサイトに用がないはずだし、いま理解する必要のないので省略します。
最後に「3」。
index.php
style.css
この2つを1つのフォルダに入れます。
フォルダの名称は、半角英数字にしてください。大文字小文字はどちらでもOKです。
「a」「A]「1」→OK
「ａ」「Ａ」「あ」「?」「？」「１」→NG
全角文字（日本語）や記号はダメです。
厳密に言えば、記号にはOKな文字（ハイフンなど）もありますが、判断基準が説明しにくいので、今は記号は全部ダメと思っておく方が楽です。
jisakuTheme
└index.php
└style.css
こんな感じのセットができたでしょうか。
それぞれのファイルの中身は以下のようになっていますか？
↓index.phpの中身
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
こんにちは
</body>↓style.cssの中身
/*
Theme Name:好きなテーマ名
*/
body{color:red;}
これをフォルダごとWordPressのテーマフォルダにアップしていきます。
ここで1つ難しい課題を乗り越えてもらう必要があります。
それはFTPソフトを使ってファイルをアップすること。
WordPressはネット上で動きます。
なので、WordPressを構成するファイルは全てネット上に置かないと動きません。
自分のパソコンからネット上に移すソフトがFTPソフトの役割です。
WordPressを運用する以上、今後もずっとつきまとう操作なので、ここは嫌でも覚えてください。
1つ1つの作業は大したことありませんので、慣れてしまえばなんともなくなります。
FTPソフトを使わない方法もあります。
それはレンタルサーバーの管理画面を使う方法です。
ただ、作業効率が非常に悪いです。
同じ作業に費やす時間では、ざっくり10倍は余裕で違うと思います。
FTPだと1時間で終わってた作業が、10時間ぐらいに膨らんでしまうということです。
FTPソフトでファイルをサーバー上に移す
まず、FTPソフトをダウンロードしましょう。
ここではFileZillaを使います。無料です。
FTPソフトは他にもいろいろあるので好きなのを使ってください。
Windowsで一番有名なFFFTP
Macで一番有名なCyberDuck
技術者の信頼が厚いWinSCP
などあります。
FileZillaを選ぶ理由は2つ。
・ダウンロード、アップロード速度がダントツに早い
・WindowsでもMacでも使える
です。
ダントツで早い理由はFilezillaは同時並行で10ファイルをアップすることができるからです。
普通のFTPソフトは1つアップが終わるまで次のファイルはアップされません。
10個並行するから10倍の速さとまではいきませんが、それでも段違いなことに変わりはありません。
インストールはダウンロードしたファイルをクリックして手順にハイハイ言ってればできます。
変な付属ソフトがインストールされるような罠もありません。
ので、細かい説明は省略します。
インストール後、アプリを起動すると、メニューが全部英語ですが、そのままでも感覚で使えます。
難しいようなら日本語にできる追加機能があります。
FileZilla プロジェクト日本語トップページ – OSDN
インストール後、アプリを起動すると左右2画面にわかれた画面が出てきます。
表示されるファイルやフォルダはその人のPC次第なので人によって変わります。
また、今からアップしたいファイルやフォルダが表示されてなければ、開いている場所が違うので、ファイルがある場所を開かなければいけません。
↓エクスプローラーに表示されてるアドレスバーをコピペするとスムーズです。
↓FileZillaの左のアドレスバーに貼り付けてください。
Enterキーを押すと左ウインドウにエクスプローラーで表示していたファイルと同じものが表示されるはずです。
これをインターネット上にアップします。
ここでは最初に作った無料レンタルサーバー「エックスフリー」へ接続する方法を書きます。（参照記事）
他のレンタルサーバーでも大体似たような手順です。（分からなければ聞いてもらえば個別に答えます）
まず、そのサーバーに接続します。
ファイル→サイトマネージャーを押します。
接続できるサーバー一覧が開きます。
「新しいサイト」を押すと上のリストに「新規サイト」が作られるので、右側の空欄にサーバー情報を記入していきます。
エックスフリーは接続情報が一箇所にまとまってないのでかなり分かりにくいです。
「プロトコル」や「暗号化」が最もセキュリティが低いものになってるのは無料だからということでしょう。
暗号化を全くしないサーバーは初めて見ました。
とは言え、個人用途で月間100万ページ見られるレベルになるまではそれで問題ないです。
そのレベルを超えるときはそれなりに稼いでいるはずなので、ちゃんとお金を出して有料のレンタルサーバーを借りましょう。月数百円のもので十分です。
数百円とか一日のランチ代にも及びませんよ。
この手順、エックスフリーの公式説明に一応書いてありますが、だいぶ不親切な書き方で、初心者には意味がわからないと思うので、1つずつやっていきましょう。
まず、「プロトコル」の記入。
言葉は覚えなくていいです。
FileZillaではドロップダウンで「FTP」「SFTP」「Storj」から選ぶようになってます。
SFTPはFTPを暗号化してハッキングされにくくしたもの、Storjは一人しかいなかった管理者を複数に分散して一人がやられても大丈夫なようにハッキングされにくくしたものです。
つまり、ただのFTPより“強い”です。
という説明は非常に問題がありますが、このサイトのレベルであればその程度の理解でいいです。
きちんと理解しようとすると時間がかかるし、たぶん「あ、無理」となります。
少なくとも僕はそうなりました。
これが理解できる人はそもそもこのサイトに書かれてることなど既に理解し終わっているはず。
そして、理解してないからダメということでもないです。
それをこれから理解するくらいなら、その時間でブログを1記事でも書いたほうが遥かにあなたの望む将来に近付けます。
何を目指しているのか、そのために何からやるべきか、常に優先順位を考えながら進めていきます。
エックスフリーは「FTP」を選びます。
強いセキュリティ欲しいならお金出してね、ということです。
次に「ホスト」。
ここからはエックスフリーの管理画面に行きましょう。
ここからの情報はその管理画面の中に書かれています。
次に「暗号化」。
「平文のFTPのみを使用する（安全でない）」を選択してください。
強いセキュリティ欲しいならお金（ｒｙ
「安全でない」とか書かれてるので不安になるかもしれませんが、大丈夫です。
月100万PVも行ってないサイトを狙うハッカーなどいません。
だって、同じ労力なら誰も知らないサイトよりみんなが知ってるサイトをハッキングしたほうが儲かりますからね。
次に「ログオンタイプ」。
最初「匿名」となっていますが、「通常」を選びます。
するとその下に「ユーザー」と「パスワード」を入力する欄が出ます。
「ユーザー」にはWordPressのURLから「https://」と最後の「/」を抜いたものを記入してください。
パスワードはFTP接続専用のパスワードが必要ですが、この時点ではまだ存在しないので、新たに作ります。
これは最初に使ったランダム文字列ツールで10文字以上のランダム文字列を作ってどれか1つ決めてください。
このパスワードは英単語や自分の生年月日など覚えやすいものは使ってはいけません。
完全に不規則な文字列にしてください。
ただそうすると自分がどんなパスワードだったかわからなくなる可能性が一番高いので、どこかにメモして保管しておいてください。
エックスフリーの管理画面から「WordPress」の「管理パネルログイン」を押して「WordPress管理パネル」に移動します。
ここはお金を使わずにセキュリティを上げることができる部分なのできちんとしましょう。
少なくとも上記の「安全でない」より遥かに危険な部分です。
簡単なパスワードを突いたハッキングは結構当たり前に起こります。
僕もされたことがあります。
WordPress内にウイルスを仕込まれたらしく、同じサーバーを使ってる人たちに迷惑をかけまくり、エックスサーバーの人から怒られました。
ウイルスがどこにあるか特定することができず、サイトを一度全部消して、ゼロから作り直すハメになりました。
ハッキングされても、ただちに露骨な被害が出ることは少ないですが、放置しておくと犯罪に使われ、被害を受けた側から多額の損害賠償を請求されたりしかねません。
クレジットの不正利用みたいなもんです。
これでFTPパスワードが設定されました。
FileZillaの「パスワード」にこのパスワードを入力します。
そして「接続」を押すと、初回のみ警告が出ます。
「このサーバーの証明書にこんなことが書かれてるけど大丈夫？」という警告ですが、大丈夫なので、「今後もこの証明書を常に信頼する」にチェックを入れて「OK」を押してください。
そもそもサーバーの証明書って何？って思うかもしれませんが、気にしなくていいです。
ブログが月間10万円稼げるぐらいになってから理解すればいいです。
なんなら、10万円稼げるようになったあとでも知らなくても問題ないレベルです。
今はもっと他に覚えるべきことがあります。
接続すると、右側のウインドウにエックスフリーのファイル一覧が表示されます。
これらのファイル全部で1つのWordPressを構成しています。
これでFTPソフトの設定は終わりです。
今後は一発で接続できます。
FTPソフトの「ファイル」→「サイトマネージャー」を選ぶと、過去に接続した場所が一覧表示されます。ここから選べばすぐにつながります。
では、オリジナル自作テーマをここにアップしましょう。
中には「twentytwentyone」とか「twentytwenty」といったフォルダがあると思います。
これはWordPressに最初から入っているテーマです。
何もしなければこれがWordPressの見た目に使われます。
このテーマは毎年新しいものがリリースされますが、リリースした年がそのままテーマ名になっています。
twentytwentyoneは2021年のデフォルトテーマ、twentytwentyは2020年のデフォルトテーマです。
最初にWordPressを動かしたとき、背景が緑のスッキリしたレイアウトの画面が出たと思いますが、あれはtwentytwentyoneが適用されていたためにあのようなデザインになっていたということです。
それをこれから自作テーマに切り替えます。
ここまで作ってきた自作テーマをフォルダごと同じ場所にアップします。
自作テーマを左ウインドウに表示できたら、フォルダごと右ウインドウにドラッグアンドドロップします。
フォルダ右クリックで「アップロード」を選んでも同じことができます。
アップしたテーマに切り替えるためにWordPressの管理画面にいきます。
URL覚えてますか？
覚えてなければ以下の手順で↓
https://www.xfree.ne.jp/login/member.php
からレンタルサーバー会員情報でログイン
「サイトアドレス」のURLがあなたのWordPressのURLです。
クリックすればそのままサイトに移動します。
WordPressサイトが開けたら管理画面にログインします。
さっきログインしたのに？と思うかもしれません。
さっきのは「レンタルサーバーのログイン」、今回のは「WordPressのログイン」なので別物なんです。
WordPressのアドレスを確認するために、レンタルサーバーからログインしましたが、URLがわかっていれば直接WordPressにログインするだけでOKです。
ブックマークしておきましょう。
いま開いてるURLに「login」を追加して、エンターを押します。
WordPressには「ログインする」ボタンがないので、ボタンからログイン画面に移動することができません。
直接URLを手打ちで入力する必要があります。
WordPressのURL/login
です。
WordPressのURLが「https://aiueo.com」ならhttps://aiueo.com/loginです。
本来は「wp-login.php」ですが、覚えにくい＆打つのが面倒なのでloginでいいです。
勝手にwp-login.phpに飛んでくれますので。
レンタルサーバーのユーザー名、パスワード、WordPressのユーザー名、パスワードなどいろんな情報があるので、ごちゃごちゃにならないように整理して管理してください。
ネットに流出するのが一番のリスクなので、紙に手書きで保管するのがセキュリティ的には最強なんですが、僕のような雑な人間は物理的になくす可能性の方が圧倒的に高いので、PCのメモ帳とかエクセルで保存してます。
手書きだと「0（ゼロ）」と「O（オー）」など似た文字の区別が曖昧になるリスクもあるので。
WordPressの機能の一部に新たな更新があるとこのように警告されるので、クリックして随時更新を適用しましょう。
放置していると、ハッカーから狙われます。
この手の更新（アップデート）は、ハッカーから狙われるスキが見つかったときに潰す目的で行われることが多いです。
つまり、放置するということは、そのスキからいつでもハッキングしてくださいと言っているようなものです。
今、この画面では「PHPの更新を推奨」と出ています。
今回使っているエックスフリーのPHPのバージョンが古いようですね。
PHPはWordPress全体を構成しているプログラミング言語です。
プログラミング言語も随時アップデートを繰り返しています。
で、今回契約したエックスフリーはPHPのバージョンに7.0.33が使われているようです。
この時点でのWordPressが推奨しているのは7.4以上（2022年6月時点）なので、7.4以上にする必要があります。
PHPのバージョンが変更できるかどうかはレンタルサーバーによって違います。
無料や安いレンタルサーバーは変えられないことが多いです。
今回のエックスフリーは無料のレンタルサーバーですが、変えることができます。
更新して赤い通知が消えればOKです。
管理画面で「外観」→「テーマ」と行くとテーマ一覧が表示されます。
その中に自作したテーマもあります。
テーマのサムネイル画像が出てないのが気になるなら、サムネイルにしたい画像を用意し、ファイル名を「screenshot」にしてテーマフォルダに入れれば表示されるようになります。
（JPEG画像なら「screenshot.jpg」、PNG画像なら「screenshot.png」）
なくても実用上は問題ないです。
画像は4:3の比率で切り取られるので、きっちり枠内に収めたいときはその比率で用意します。
（上の例では正方形の画像を使ったので上下が切り取られています）
これでこのサイトはこのテーマが適用されました。
ただ、このままでは新しい記事を書いても、ページを移動しても「こんにちは」としか表示されません。
試しに記事を書いてみると分かります。
管理画面に戻ります（サイトURLのあとに/loginを付け足す）。
「投稿」の中の「新規追加」を押します。
タイトルと本文を何か適当に書いて右上の「公開」を押します。
「投稿を表示」を押すとその記事が表示されるはずですが…
「こんにちは」のままです。
これはテーマのファイル（index.php）の中に「こんにちは」しか書いてないからです。
ブログサイトはページによって表示させる構成が変わります。
たとえばトップページは記事のタイトルだけが並んだリストが表示されます。
記事ページではその記事のタイトルや本文が全部表示されます。
これらは「タイトルのリストを表示して」とか「本文を全部表示して」といった命令で実現されます。
WordPressではファイル名を「single.php」とすると、その中身が記事詳細を表示するときに使われます。
index.phpの他にsingle.phpを作ることでトップページと記事詳細ページで表示させる内容を切り替えられるようになります。
それについてはこちらを見てください。