【やってみた】WordPressのテーマ自作(02.テーマのアップロードとパスの設定)

今回の記事は、STEP3の「テーマの有効化」の「02.テーマのアップロードとパス設定」の解説となります。テーマをアップロードして有効化、テーマとして認識する為に必要なファイルの設定、画像の置き換え、bootstrapのcdnのリンクなどを解説します。

ローカル開発環境の起動

動画の解説は、こちら

Localの起動

サイトの選択

「mysite」にローカル開発環境を構築していますので、「mysite」を選択します。

「Start site」のクリック

「mysite」の起動

「1 site running」となり、「mysite」が起動しました。

テーマの確認

「Blog Home」の確認

ダウンロードしたStartBootstrapの「Blog Home」テーマを確認しておきます。

ファイル構成の確認

index.htmlとCSSのみのシンプルな構成です。

index.htmlからindex.phpに変換して、個別ページ(single.php)、固定ページ(page.php)、サイドバー(sidebar.php)等を追加していきます。

スタイル構成の確認

Googleへコピー

Googleへコピーしてスタイルを確認します。

スタイル構成

メニューバーの下に、ヘッダータイトルがあり、その下にピックアップ記事とサイドバーがあります。ピックアップ記事の下には、2列で投稿記事が表示される構成です。

ピックアップ記事は、トップは3列にして、サイドバーにも設置したいと思います。

テーマのアップロード

テーマフォルダのアップロード

ダウンロードしたテーマ「BlogHome」をローカルサイトのWordpressにアップロードします。

ローカルのmysiteサイトを起動

WorsPressをインストールしたローカルのサイト「mysite」を起動して、themesの中に解凍したBlogHomeのフォルダをコピーします。

フォルダのコピー

app→public→wp-content→themesの中にダウンロードしたBlogHomeのフォルダをコピーします。

フォルダ名の変更

コピーしたフォルダ名は、ここではわかりやすい名前(myblog)とします。

留意:
ダウンロードしたテーマ「BlogHome」をzip形式のまま、アップロードするとエラーとなり、アップロードできませんので、解凍したフォルダをコピーして下さい。「index.php」と「style.css」の2つのファイルがテーマフォルダの直下になければなりませんが、テーマ「BlogHome」は、style.cssファイルを「CSS」フォルダの中に格納していて階層が異なっている為、zip形式ではインストールできません。

テーマの有効化

WordPressにログイン

mysiteからWordpressにログインして、外観からテーマを選択します。

管理画面から外観のテーマを見ると「スタイルシートが見つかりません」と表示されて、テーマとして認識されていません。

myblogのフォルダをVSCで開く

myblogにカーソルを位置づけて右クリックから「コードで開く」をクリックして、VSCを開きます。

style.cssの作成

ダウンロードした「BlogHome」テーマのフォルダをthemesにコピーしましたが、テーマとして認識されていませんので、style.cssファイルを追加します。

新しいファイルの作成

style.cssと入力します。

style.cssの設定

次のように入力します。

Authorは、何でも構いませんが、自分のニックネームが良いでしょう。

再読み込み

再読み込みすると、エラーメッセージが変わります。

「index.phpが必要」と表示されました。

index.phpの作成

こちらは、index.htmlをindex.phpと名前を変更します。ファイル名を右クリックから「名前の変更」をクリックして、名前(拡張子)を変更します。

再読み込みすると、テーマが認識されました。

テーマの有効化

myblogテーマの「有効化」をクリックします。

有効化されました。

サイトの表示

テーマが有効化されましたら、サイトを表示してみます。

スタイルが整っていませんが、表示されました。

テーマの画像設定

テーマの画像を設定するには、テーマフォルダ(ここではmyblog)に画像をUPすれば設定できます。ファイル名は、screenshot.png又はscreeshot.jpgとします。900×1200pxにすればOKです。
（縦横比が3:4であれば、360:480 / 450:600 / 720:960 / 900:1200でもOK)

再読み込みすると、画像が表示されました。

パスの設定

パスの設定

WordPressの管理画面から「サイトの表示」をクリックしてサイトを確認すると、以下のようにCSSが適用されてない為、レイアウトが整っていません。

絶対パスに変更

相対パス(index.htmlから見た場所)から絶対パスに変更します。

再読み込みすると、CSSが適用されてレイアウトが整いました。

正しいパスの設定

絶対パスの指定では、例えばサイトの引越し等でドメインが変わったり、テーマの名前が変わることがありますので、絶対パスで直接書くのは好ましくありません。そこで、WordPressで用意されている専用のテンプレートタグを使用します。

ソースを見てみると、゛http://mysite.local/wp-content/themes/myblog/”と出力されています。

Javascriptの読み込みにも設定します。

style.cssの選択

今回は、「BlogHome」テーマで用意されたstyle.cssは使いませんので、CSSフォルダ内のstyle.cssではなく、「テーマのアップロード」の際に作成したstyle.cssにlinkします。

再読み込みすると、再度CSSが適用されていない状況となります。

不適切なmetaタグの削除

DescriptionやAuthorというmetaタグが空の状態で出力されていますので、これを削除します。

Bootstrap CDNの導入

「BlogHome」の用意されたCSSにはBootstrapのCSSが記述されていますが、今回は独自のstyle.cssを使いますので、bootstrapのCDNを導入します。

CDNのコードをコピーして、headタグに追加します。

再読み込みすると、bootstrapのCSSが適用されて、レイアウトが整いました。

画像の差し替え

「BlogHome」のテーマでは画像を外部のサイトから読み込んでいますので、これを自分で用意したテスト画像に差し替えます。

差し替え方法

テスト画像の挿入

ビジュアルスタジオコードで、「img」フォルダを作成して、そこに画像を登録します。

「img」フォルダの作成

「新規フォルダの作成」をクリックして、「img」フォルダを作成します。

テスト画像を登録

用意しておいたテスト画像をimgフォルダにドラッグ&ドロップで登録します。10枚位の画像を用意しました。

登録完了

imgフォルダにテスト画像を登録しました。

テスト画像の差し替え

全ての画像を差し替え

同様にして、外部サイトから取得している画像をテスト画像に差し替えます。絶対パスでリンクを貼ります。

必須のテンプレートタグ

wp_head()とwp_footer()は、Wordpressのプラグインが正しく機能するために必要なファイル群を読み込むための関数で、プラグインAPIフックと呼ばれるものです。

wp_headタグの記入

wp_headアクションをスタートさせます。テーマテンプレートファイル内のタグ直前で使います。(header.phpやindex.phpの中)

wp_footerタグの記入

wp_footerアクションフックをスタートさせます。テーマテンプレート内のタグ直前で使います。(例:footer.phpやindex.phpの中)

管理ツールバーの表示

wp_headとwp_footerを記載すると、黒いバー(管理ツールバー)が表示されます。(ログインしているユーザーのみに表示されます。)
wp_headとwp_footerは、プラグインを動作させる為やWordpressに必要な動作にも必要ですので、省略できません。