FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

WordPress カスタマイズ その1

投稿日:2020年12月24日 更新日:

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろと分からないことばかり。これからWPをやろうとしている人の参考になれば幸いです。

miku-nosuke

WordPressのカスタマイズについて調べました!

テーマのスタイル(ex. 文字の大きさ、色など)をカスタマイズしたいのだが、どこの何をゴニョゴニョしたらいいかわからない?
  • ダッシュボードから
  • テーマフォルダ > style.css から

まずは、ダッシュボードの外観から基本操作で外観を設定する

無事にインストールが終了したら、基本的な設置をした後、テーマを選び、プラグインを入れ新規投稿となります。

wp-dashbord

ダッシュボードから外観を選択して、ヘッダーのレイアウト、背景色、文字の色などをかすたまいずできます。これがスタンダードなやり方になります。

wp-custom
カスタム画面

このように、カスタマイズしたい項目を選んで外観を好みに変更できます。どの程度、細かく変更できるかはテーマによります。今回。私が選んだテーマはSTINGER8というものです。シンプルな分自分でカスタマイズすることが求められるテーマのようです。

logo-defalt
defaultのヘッダー部分

いろいろと設定を終えて、ビューワーで見てみました。構成を見てみると上からタイトル、サブタイトル、メニュー、ロゴとなっています。

カスタマイズの目標

header-custom
図1. こんな風にしたいのだ

でもね、おじさんはこんな風にしたいのだよ。基本設定からではココまでのカスタマイズは出来ません。カスタマイズするためにはphpやcssを書き換えなければならないのです。そこまでは知っているけど実際にどこをどうすれば良いのかわからない。そこで、YouTubeやネットでいろいろと調べてみました。

WordPressのフォルダ構成

どこかにhtmlやcssが記述されているファイルがあるはずで、そこを書き換えることでカスタマイズすれば良いことは容易に想像できます。そこで、先ずは、それらファイルを探すことにしました。結論から言おう、テーマフォルダ内にある○○.php、style.css を書き換えることでカスタマイズが可能になります。

では、○○php、style.css はどこにあるのでしょうか?
ここで便利なのが Local というアプリです。こいつはローカル環境内にWordPressを起ち上げる、というものです。練習用に使用したり、本番に上げる前にこいつを使用して仕上げて完成後ftpアプリでアップロードするなどに使用します。

図2.Local

LocalでのWordPress設定はネット上に多くの記事がありますのでそちらを参照してください。さて、ここからsiteを開くと以下の様に構成されていることが分かります。

図3.local_site_folder

ここから、例えば、madonna > app > public > wp-content > themes > stinger8(目的のテーマ)> ○○.php や style.css があります。

図4.wpのフォルダ階層

ここでは、ローカル環境で説明していますが、本番環境でも同じ構造になっています。本番環境ではFilezilla などのftpアプリを使用してください。

実際のカスタマイズ

さて、目的のファイルが見つかったらVS code などエディタを使ってカスタマイズしてみましょう。今回はヘッダー部分をカスタマイズしたいので以下の手順を踏みます。

  • header.php をVS code で開く
  • google.chome で検証する
  • 子テーマを作る
  • 子テーマに必要なファイルを保存
  • VS code で書き換える
  • VS code を保存

子テーマを作る

VS code や chrome 要素検証はネット上の他記事に委ねるとして重要なのは子テーマを作るということです。

なぜ、子テーマを作るのか?

親テーマをアップデートした場合、カスタマイズしたファイルもアップデートされたファイルに書き換えられる。

いつくか理由はあると思いますが一番はこれでしょう。せっかく書き換えたファイルが元の状態に戻ってしまいます。(゚◇゚)ガーン
そこで、アップデートの影響を受けないように子テーマを作ります。親テーマがアップデートされてもhtmlやcssは子テーマが優先されるのでその影響を受けないことになります。

ほとんどのテーマには子テーマがあると思うのですが、無い場合には自分で作りましょう。ここで使っているStinger8 にも子テーマが元々あるのですが今回は自分で作っています。

長くなったので今日はここまでです。

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

オリジナルテーマから深掘りするWordPress その4

今回はテンプレートファイルのお作法について学習したことを書きます。お作法を施すことでよりWordPressっぽくなります。 miku-nosuke この記事を読むことでwp_head()、blogin …

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

no image

シンプルな例でFLOCSSについて考えた

皆さんこんばんは。RasieTechのWordPressコースmiku-nosukeです。今回の記事はCSS設計です。いままで見て見ぬふりをしてきました。しかし、CSS設計は避けては通れない道。ココを …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP