SHU BLOG

NEW
お知らせ
NEW 2022.12.02 【CSS】marginの指定方法について TikTokにてショート動画公開中!!
お知らせ
NEW 2022.12.01 【WordPress】公開日と最終更新日を表示の方法を解説
お知らせ
2022.11.24 【WordPress】記事ページに表示する、しない条件分岐を解説

BLOG NEWS ブログ

TITLE

【WordPress】オリジナルテーマファイルの設定について解説

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【WordPress】オリジナルテーマファイルの設定について解説!!
の解説になります!

こんな方に読んでほしい

  • WordPressを学び始めた方へ
  • WordPressのオリジナルについて解説していきます。
  • 今回はWordPressの「テーマファイルの設定」について解説しております。

WordPressのテーマの設定について

WordPressのテーマの設定について

WordPressのテーマファイルとは、サイトを作成する際に、「無料」「有料」「オリジナルテーマ」を決めます。
テーマファイルを元にホームページをカスタマイズをしていきます。
WordPressにはデフォルトで「Twenty Nineteen」、「Twenty Sixteen」などが用意されております。

今回は「オリジナルテーマ」に必要なファイルの紹介になります。

テーマ画面について

テーマファイルを設定するには、「メインナビゲーションメニュー > 外観 > テーマ」を選択します。
テーマ画面に移行を確認後、ご自身で作成してテーマファイルを「有効化」にし完了になりますが、
テーマファイルには、必要なファイルがあります。

1:テーマ画面に移行
「メインナビゲーションメニュー > 外観 > テーマ」を選択します。
2:テーマファイルの有効化
必要なファイルが揃ってる場合は、テーマ選択画面にご自身で作成したテーマファイルの「screenshot」が表示します。
テーマファイルの有効化をクリックしテーマ変更完了になります。
※テーマファイルが壊れてる場合以下のように表示します。

テーマファイルの作成について

テーマファイルの作成について

上記では、テーマを変更、追加について解説してきました。
次に、テーマファイルに必要になるファイルについて解説していきます。

ディレクトリについて

最初に、フォルダを作成します。
フォルダ名は、「半角・小文字の英数字とハイフン以外」は、なるべく使わないようにしましょう。
フォルダ作成後は、wp-content/themes/テーマ名の配下に作成していきます。

必要なファイルについて

上記で解説したように、必要なファイルが存在しない場合、「壊れたテーマ」とみなされテーマ画面に反映されません。
先ほど作成したフォルダにまだファイルがない為、「壊れたテーマ」になっております。

主な必要ファイルは以下のようになります。

style.css (必須)
テーマのスタイル記述します。
index.php (必須)
ホームページのトップページの役割になります。
screenshot.png (必須)
必ず必須ではないが、なるべく用意しましょう。
functions.php (必須)
テーマに使用する関数等のファイルになります。

style.cssについて

順に解説していきます。
スタイルシートとは、style.cssが必要になっております。
style.cssを作成後、以下のように、テーマのスタイル記述します。

 /* 
Theme Name: オリジナルテーマ名
Theme URI: ホームページのurlに変更
Description: オリジナルテーマの説明を入力
Version: バージョンを入力
Author: 作成者名に変更
*/

style.cssを入力後、先ほどのwp-content/themes/テーマ名/style.cssの配下にアップロードします。

フォルダ名「demo」、説明には「テンプレートが不足しています。独立したテーマには index.php…」になっております。
次に、index.phpを準備します。

index.phpについて

現状、「index.html」がある場合は、phpファイルを用意します。
コピー&ペーストし、ファイル名を「index.php」に変更しましょう。

index.phpに変更後、先ほどのwp-content/themes/テーマ名/index.phpの配下にアップロードします。

現状:テーマフォルダのアップロード先について
wp-content/themes/demo/ の「demo」の中身
現状:テーマフォルダの中身について
・style.css
・index.php
・screenshot.png
・functions.php
・ホームページで使う「images」、「css」フォルダもアップロードしておきましょう
現状:テーマ画面
現状、「style.css」、「index.php」の2点しかありませんんが、テーマとしては表示できます。
「screenshot.png」がない場合、以下のように表示します。

screenshotについて

「screenshot.png」は、必ず必須ではありませんが、他のテーマと間違い防止になるので、
用意できる際には必ず用意しましょう。
画像サイズは「横880px × 縦660px」ぐらいにしておきましょう。

上記の画像サイズで、「screenshot.png」を作成します。
同じようにwp-content/themes/テーマ名/screenshot.pngの配下にアップロードします。

functions.phpについて

「functions.php」の役割としては、主にテーマに使用する関数等のファイルになります。

functions.phpの役割
・管理画面のカスタマイズ
投稿名の名前を変更したい、ダッシュボードの不必要な項目を非表示にしたい、など
・記事のカスタマイズ
アイキャッチ画像を投稿画面に表示させたい、アイキャッチ画像のサイズを指定、など
・ウイジェットのカスタマイズ
主に、サイドバーをカスタマイズしたい場合など、様々なコードを記述することが可能になります。

その他のファイルについて

上記では必須ファイルに解説してきましたが、
その他にも用意しておく必要なファイルについて簡単に解説します。

header.php
全ページ共通となるヘッダーファイルになります。
footer.php
全ページ共通となるフッターファイルになります。
sidebar.php
サイドバーファイルになります。
single.php
投稿記事詳細ファイルになります。
page-〇〇.php
固定ページ用のテンプレートファイルになります。
category.php
カテゴリーテンプレートファイルになります。
archive.phpp
日付別アーカイブファイルになります。
search.php
検索用ファイルになります。
404.php
エラーファイルになります。

上記のように、用途に合わせてファイルが必要になってきます。
今回は、オリジナルテーマに必要なファイルの役割について覚えておきましょう。

最後:テーマフォルダのアップロード先について
wp-content/themes/demo/ の「demo」の中身
最後:テーマフォルダの中身について
・style.css
・index.php
・screenshot.png
・functions.php
・ホームページで使う「images」、「css」フォルダもアップロードしておきましょう

まとめ

今回はこれで以上です。

POINT
  • WordPressのテーマとは、サイトを作成する際に、「無料」「有料」「オリジナルテーマ」を決めます。
  • テーマファイルには、必要なファイルがあります。
  • テーマフォルダを作成する際には、「半角・小文字の英数字とハイフン以外」は、なるべく使わないようにしましょう。
  • フォルダ作成後は、wp-content/themes/テーマ名の配下に作成していきます。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

HP

お助けコネクト

神奈川県を中心に不用品回収・粗大ゴミ回収・遺品整理・ゴミ屋敷片付け・家具の移動 など
なんでもやります!!お気軽にご相談ください。詳細はコチラから

page_top