どうなってる？ディレクトリ構成
wordpressの中身
下図はDLしたWPの中身です。DLしたWPの中には、数々のファイルやらフォルダが存在してますが、使うのは一部です。
下図はwp-contentの中身です。WPに元々あるテーマや他からDLしたテーマはこちら、[ wp-content ＞ themes ] に配置されます。
触るファイルはテーマ(下記の画像では筆者がDLしたテーマ「 businesspress 」です)の中にある、主にstyle.cssやheader.phpやfooter.phpなどのファイルです。
テーマのファイル構成
テーマ [ themes ] の中身ですが、カスタマイズに応じて必要なファイルを触ります。
- style.css [ ページデザイン ]
- functions.php [ 機能制御 ]
- header.php [ ヘッダー ]
- footer.php [ フッター ]
- page.php [ 固定 ]
- single.php [ 投稿 ]
- index.php [ フロント ]
- archive.php [ アーカイブ ]
- category.php [ カテゴリー ]
- content.php [ コンテンツ ]
- sidebar.php [ サイドバー ]
- search.php [ 検索結果表示 ]
- comments.php [ コメント ]
- screenshot.png [ テーマ画像 ]
テーマ編集
テーマをDLしたら…
まず、テーマをDLしたら、子テーマ作ります。理由は、テーマは度々アップデートします。その影響でレイアウトが崩れる可能性があります。度々のアップデートに影響されないように、子テーマを作成してレイアウト崩れを回避します。
まずはテーマをDL
子テーマの作り方
WPフォルダの中の [ wp-contemt ] ＞ [ themes ]を開きます。
themesフォルダに新規フォルダを作成します。引き継ぐテーマ名に「_child」をつけ、新規フォルダを作成します。
「親」テーマを引き継ぐために、新規で作成した [ _child ] フォルダに [ functions.php ] と [ style.css ]を作成します。 親からファイルを_childフォルダへコピペします。
新規で作成した [ _child ] フォルダに作った [ functions.php ] に下記の記述をします。WordPress内にCSSやJavaScriptの機能を追加したり、親テーマの後に子テーマを読み込んだりするための指示を出します。
<?phpadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );functiontheme_enqueue_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}
CSSには[ Theme Name ]と[ Template ]の記述が必要です。
/*
Theme Name: businesspress-child
Template: businesspress
Version: 1.6
Description:businesspress専用の子テーマ
*/
- Description [ 説明 ]
- Theme Name [ 子テーマの名前 ] ※必須
- Template [ 親テーマの名前 ] ※必須
- Version [ バージョン ]
子テーマのイメージ画像の作り方
イメージ画像を作成して、[ screenshot.png ]にリネームして、下記の階層に入れます。
子テーマのメリットデメリット
メリット
- アップデートにレイアウトなどの影響受けないセキュリティーなどの関係でテーマが度々アップデートされます。それによりレイアウトが崩れる恐れがありますが、あらかじめ作成した子テーマには、カスタムしたものが影響を受けません。
- 万が一の間違い大元の親テーマのファイルを削除、またはコードに取り返しのつかないミスがあり修正できない…なんてことを回避できるように、子テーマで作成していきます。何か間違いがあれば、親テーマを上書きして戻せるのが利点です。
- ラクラク作業基本となる親テーマにカスタマイズするので、ラクです。
デメリット
- 製作期間が長いサイト自体が重くなることもデメリットの1つです。
親テーマに加えて子テーマを読み込む必要があるため、サイトの表示速度が悪化してしまいます。 - 表示が遅くなる？！サイト自体が重くなることもデメリットの1つです。親テーマに加えて子テーマを読み込む必要があるため、サイトの表示速度が悪化してしまいます。
- ラクラク作業基本となる親テーマにカスタマイズするので、ラクです。
子テーマ作り方参考サイト
- WordPressのフォルダ・ディレクトリ構成
- 「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！
- 子テーマの作り方も解説
- カスタマイズしたWordPressテーマのアップデート方法と注意点
固定ページで独自のテンプレート追加
ページ設定でプルダウンに自作テンプレートを追加する場合は、テンプレートファイルを子テーマの同じ階層に配置。するとプルダウンに追加され選択できます。
〈 phpをカスタマイズ 〉ソースを編集しカスタマイズ
<?php
/*
* Template Name: widepage
*/
?>
<?php get_header(); ?>
<section class="contentBlock_">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<h2><?php the_title();?></h2>
<?php the_content(); ?>
<?php
endwhile;
endif;
?>
</section><!--/contentBlock_-->
<?php get_footer(); ?>
参考サイト
- WordPressとPHPの仕組み テーマとプラグインについても紹介
- page.phpの作成
- WPテーマを自作する方法解説
- 「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！
- 作成方法と使い方を初心者向けに解説
- 子テーマの作り方も解説
- カスタマイズしたWordPressテーマのアップデート方法と注意点
- ざっくりWordPressの自作テンプレートの作り方
- 【テーマ自作】WordPress
- WordPressのテーマを自分で作成してみたら意外と簡単だった！
- 【WordPress全画面動画ヘッダーの作り方】プラグインなし（カスタムHTMLと追加CSSで作る）
- BusinessPressを使った色々なカスタマイズ
- フッターメニュー／各種ボタン設定とカスタマイズ
- PHPで新着情報を表示させる （ワードプレス）
- Shopify の Debut テーマに LINE のリンクアイコンを追加する
- WordPress全画面動画ヘッダーの作り方
- モバイルページに固定フッター
焦る前にやっておきたい事
ビジュアルエディターの無効
HTMLソースが消えてしまうことがあるため、「ビジュアルリッチエディターを使用しない」にチェック！テキストエディタからビジュアルエディタに切り替えるタイミングで、消えてしまうらしいということが原因
WordPressの怪 – 投稿画面から一部のタグや属性が消えてしまう現象
エディタ切り替え禁止
【エディタ切り替え禁止】ビジュアルとテキスト？クラシックエディタでどちらか一方だけ表示する方法
WordPressで自動挿入されるタグ<p>や<br>を除去する方法
プラグインが勝手に消えてしまう？！
プラグインやテーマのカスタマイズが勝手に消えてしまうときはテーマやプラグインのオートアップデートを停止
WP管理画面が真っ白
WordPressの編集画面が真っ白になる原因6つと対処法8つ
自動更新を停止
自動更新を停止することで上書きされてカスタマイズが消えてしまうことを防ぐことがプラグインやテーマで可能
