【WordPress】PHPやCSSを別ファイルにしてテーマエディターを見やすくする 

2023年2月7日

いろんなcssをstyle.cssに記述したり、大量のPHPコードをfuction.phpに記述したりしていると、とて見づらい、管理しにくいと感じます。

そこでグループごとに別のファイルに分けて管理するようにします。
それではやってみましょう。

使用しているテーマによっては、レイアウトが崩れるところもでてくるかもしれません。
自己責任でお願いします。

うまくいかなかった時のことを考え、作業前には必ずバックアップを取ってください。

スタイルシート(style.css)で別のCSSファイルを読み込む

cssから別のファイルを読み込むコードは以下になります。

@import url("cssファイルのurl");

テーマのための関数(function.php)で別のphpファイルを読み込む

phpから別のファイルを読み込むときは以下のコードを利用するといいでしょう。

include_once('phpファイルのurl');

テーマエディターをスッキリさせる

CSSを別ファイルからの読み込みにする

実際にCSSを別ファイルに保存して外部読込してみたいと思います。
うまくいかなかった時のことを考え、作業前には必ずバックアップを取ってください。

別ファイルに出力する

スタイルシート(style.css)から対象となるCSSのコードを抜き出します。

テキストエディタにペーストし、utf-8で保存します。
人気記事を取得するショートコードのCSSを抜き出したのでファイル名は「get_pop_list.css」としています。

ファイルをサイトにアップロードする

FTPソフトなどでPHPファイルをサーバーにアップロードします。

他のファイルと被らないおよび自分が管理しやすいように「wp-original」というディレクトリを新しく作成してそこに保存しました。

別ファイルの読み込み処理を記載

別ファイル化したものをスタイルシート(style.css)で読み込むようにします。

@import url("/wp-original/css/get_pop_list.css");

こんなにスッキリしました。

ショートコードを別ファイルからの読み込みにする

実際にショートコードを別ファイルに保存して外部読込してみたいと思います。
うまくいかなかった時のことを考え、作業前には必ずバックアップを取ってください。

別ファイルに出力する

テーマのための関数(function.php)から対象となるPHPのコードを抜き出します。

テキストエディタにペーストし、utf-8で保存します。

またPHPファイルとして独立するので先頭に<?php をつけてください。

末尾に?>をつけてください。

人気記事を取得するショートコードを抜き出したのでファイル名は「get_pop_list.php」としています。

ファイルをサイトにアップロードする

FTPソフトなどでPHPファイルをサーバーにアップロードします。

他のファイルと被らないおよび自分が管理しやすいように「wp-original」というディレクトリを新しく作成してそこに保存しました。

別ファイルの読み込み処理を記載

別ファイル化したものをテーマのための関数(function.php)で読み込むようにします。
ここではサーバーのWordpressインストールパスが定義されている定数ABSPATHを使用しています。

include_once(ABSPATH . 'wp-original/php/get_pop_list.php');

こんなにスッキリしました。

大分スッキリしました。