火はじめにWordPressを使っていると自分の好みに合わせて色々とデザインや機能を変更したくなってくると思います。その場合、最初はテーマを編集したりプラグインを追加したりして対処するものの、少しづつテーマを自作してみたいという気持ちが出てきました。ゼロからWordPressのテーマを自作するのはハードルが高いと思います。そこで、スケルトンテーマ、またはスターターテーマと呼ばれる必要最小限の骨子となる部分だけを含むテーマをベースとしてそこからテーマを自作していく方法があります。今回はUnderstrapというスターターテーマを使用し、実際にこのUnderstrapを使って開発をすすめる準備段階までの作業手順をメモします。できるようになること以下のような見た目の自作テーマのベースとなるUnderstrapを適用し、開発環境を整備します。Understrapの子テーマでメインカラーを変更するところまでの手順をのせます。前提WordPress本体の準備は完了済とするOSは問いませんが、以降での作業はターミナルを前提とした作業になっています。作業概要Understrap本体と子テーマファイルをダウンロードし、簡単な初期設定を行います。その後、実際に自作していく子テーマでメインカラーを変更してみます。UnderstrapについてUnderstrapをダウンロードするダウンロードしたテーマファイルをテーマフォルダに設置する子テーマの初期設定をおこなうGulpをインストールするスタイルファイルを修正するUnderstrapについてUnderstrapは、WordPressの開発元であるAutomatic社が開発しているUnderscoresという名前のWordPressスターターテーマをベースとし、そこにBootstrapを組み合わせたスターターテーマになります。Underscoresの公式サイトは以下です。WordPressunderscores.meUnderstrapの公式サイトは以下です。現在はBootstrap4が標準で入っています。project.understrap.comUnderstrapはオープンソースであるためコードはGitHub上で全て公開されており個人商用利用無料です。以降で実際の作業手順を説明していきます。UnderstrapをダウンロードするUnderstrap本体と、子テーマ用に用意されているUnderstrap-childの2つを公式GitHubリポジトリからダウンロードします。以下はUnderstrap本体のリポジトリです。ZIP」をクリックしてでダウンロードします。同様に、子テーマであるUnderstrap-childも以下の公式リポジトリからダウンロードします。project.understrap.com両方のテーマをダウンロードできたらここでの作業は完了です。ダウンロードしたテーマファイルをテーマフォルダに設置するダウンロードが完了すると、以下の2つのファイルがダウンロードフォルダ等にダウンロードされます。understrap-master.zipunderstrap-child-master.zipこの2つを解凍します。ここではunzipコマンドを使用しましたが、解凍ソフトを使ってももちろんOKです。understrap-child-master.zip解凍してできた2つのフォルダを自分のWordPress本体のwp-content/themes配下に移動します。/var/www/html/wp-content/themes/ここで、今後の作業としては、子テーマであるunderstrap-childの中身に手を加えることで自作テーマとして作成していきます。そこで、understrap-childというフォルダ名を自分の好きなテーマ名に変更しておきます。ここでは、以下のようにmythemeと変更します。mytheme現時点では、wp-content/themesの中身は以下のようになります。understrap-mastertreeコマンドディレクトリのツリー構造を出力してくれるコマンドになります。UbuntuやMacではデフォルトではインストールされておらず、Ubuntuでは以下でインストール可能です。tree使い方については以下の参考サイト様にわかりやすく書いてあります。】コマンド――ディレクトリをツリー状に表示する本連載は、Linuxのコマンドについて、基本書式からオプション、具体的な実行例までを紹介していきます。今回は、ディレクトリやファイルをツリー状に表示する「tree」コマンドです。www.atmarkit.co.jp子テーマの初期設定をおこなうこれから自作するテーマをWordPressに認識してもらうために、いくつか修正しなければならないファイルがあります。今回自作していくテーマは子テーマをベースとしたものになります。WordPressでは、そのテーマが子テーマであるかどうか、またその子テーマの情報をstyle.cssに書いてある記述から判断します。子テーマであるmythemeフォルダ直下にあるstyle.cssを適当なエディタで開いてみます。すると、中身は以下のようになっています。holger1411/understrap-child*/子テーマをWordPressに認識してもらうには、以下の2点を自分用に変更する必要があります。Name:テーマの名前Template:親テーマのディレクトリ名ここでは、上記2つを以下のように変更します。Nameは任意の名前で大丈夫ですが、Templateは、厳密に親テーマが入っているディレクトリ名と一致する必要があります。understrapとなっていますが、この場合はthemeフォルダにundetrstrapという親テーマを含むディレクトリが存在する必要があります。私の場合は、GitHubからダウンロードして解凍してできたunderstrap-masterをそのまま使用するため、以下のようにTemplate:understrap-masterとしました。ThemeTemplate:understrap-masterまた、不要なところの削除も含めて最終的にstyle.cssを以下のようにします。Themeとして認識され表示されています。有効化した後にサイトを開いてみると、デフォルトでは以下のような濃い紫色がメインの見た目になっていると思います。以降でこの見た目を変更していきます。GulpをインストールするUnderstrapではBoostrapなどのパッケージ管理用にnpmを使用しています。sassのコンパイル等を実行するタスクランナーとしてGulpを使用します。そこで、こちらの公式ドキュメントに従って、npmでgulpをインストールし開発環境を整備します。Vagrantの使用経験があれば、VCCWを使うのがお手軽で楽です。VCCWならばデフォルトでnode.jsやnpmが入っています。VCCWのセットアップ手順は以下にまとめているので興味のある方は見てみてください。ローカルでのWordPress環境構築にはVagrantのVCCWがお手軽で早くてとても便利VCCWのセットアップまでの作業手順をメモしています。www.virment.comここからはnode.jsやnpmが使える前提での作業になります。自分の子テーマフォルダに移動し、以下のnpmを実行します。これでグローバルにGulpがインストールされます。gulp-cli依存関係にあるパッケージもインストールするために以下も実行しておきます。installこれで後はgulpを起動します。msこの状態で自身の子テーマフォルダmythemeにあるsassファイルを修正すれば、自動的にCSSファイルにコンパイルされます。watchを実行している状態で、子テーマのsassファイルを修正して好きな見た目に変更していきます。Understrapの子テーマで主に修正するスタイルファイルは以下の2つになります。sassファイルです。mytheme/sass/theme/_child_theme.scssmytheme/sass/theme/_child_theme_variables.scss_child_theme.scssにはスタイルを追記し、_child_variables.scssにはよく使う色などの変数を追記します。試しにメインカラーを変更してみます。デフォルトの状態では_child_variables.scssの中身は以下のようになっています。blue;に変更してみます。すると、少し時間置いて以下のようにgulpが動き自動的にコンパイルされます。s自身のWordPressサイトをリロードしてみると、以下のようにメインカラーが青い色に変更されます。このように、後は自由にスタイルやさらにphpファイルを修正して自作していきます。まとめ色々なスターターテーマがありますが、中でもUnderstrapはBootstrapを使用しており、自作テーマの取っ掛かりとしてはかなりやりやすいかと思います。Bootstrapは情報量も多くつまづいても解決までにかかる時間も他のCSSフレームワークに比べて短いと思います。Understrapおすすめです。今度はもっと色々な機能を追加したり、Bootstrapのスタイルを適用したりする手順をメモします。WordPressでブログを作成している場合、そのブログのトップページとして投稿ページを一覧表示している場合が多いと思います。Analyticsからモバイル表示の問題が深刻のため対応するようメールが届いていました。WordPressサイトを構築する際に、現在は色々なレンタルサーバがあり選択肢も豊富です。コメントをキャンセルメールアドレスが公開されることはありません。virtualiment。