• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Genesis WP Fan

Genesis Framework とWordPressカスタマイズの情報サイト

  • ホームHome
  • 日本人向けGenesis子テーマ「Muromachi」Genesis Child Theme “Muromachi”
  • Genesis とは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • お問い合わせ
HomeGenesis Framework カスタマイズ【安全カスタマイズ】Genesisカスタマイズ用PHP/CSSファイルの作り方
  • Genesis Framework カスタマイズ

【安全カスタマイズ】Genesisカスタマイズ用PHP/CSSファイルの作り方

Genesis のテーマをカスタマイズするとき、Genesisフレームワークなどのカスタマイズに慣れていない人にオススメなのが、カスタマイズ用のPHPファイルやCSSファイルを作ってしまうことです。

カスタマイズの内容によっては、別のファイルを編集しなければならない場合もありますが、一度カスタマイズ用のファイルを作ってしまえば、より安全にGenesisサイトをカスタマイズできるようになります。

目次

  • カスタマイズ用PHPファイルの作り方
    • 1 custom-functions.phpを作成
    • 2 FTPでアップロード
    • 3 custom-functions.phpを読み込み
  • カスタマイズ用CSSファイルの作り方
    • 1 custom-style.cssを作成
    • 2 FTPでアップロード
    • 3 custom-style.cssを読み込み
  • 読み込めているかどうか確認してみる
    • 1 カスタマイズ用PHPファイルの確認
    • 2 カスタマイズ用CSSファイルの確認
    • 3 うまく読み込まれない場合

カスタマイズ用PHPファイルの作り方

1 custom-functions.phpを作成

custom-functions.phpという名前のPHPファイルを新規作成し、以下のコードを追加します。

<?php


2 FTPでアップロード

①で作ったcustom-functions.phpを、FTPでGenesis子テーマのフォルダにアップロードします。

genesis-custom-php-css-file-1

3 custom-functions.phpを読み込み

アップロードしたcustom-functions.phpは、そのままでは動かないので、Genesis子テーマのfunctions.phpに以下のコードを追加します。

//* カスタマイズ用PHPファイルの読み込み
include_once( 'custom-functions.php' );

カスタマイズ用のPHPファイルはこれで完成です。カスタマイズ用のコードを追加するときには、上から順にコードを追加すれば大丈夫です。

カスタマイズ用CSSファイルの作り方

1 custom-style.cssを作成

custom-style.cssという名前のCSSファイルを新規作成します。

2 FTPでアップロード

①で作ったcustom-style.cssを、FTPでGenesis子テーマのフォルダにアップロードします。

genesis-custom-php-css-file-1

3 custom-style.cssを読み込み

アップロードしたcustom-style.cssも、そのままでは動かないので、Genesis子テーマのfunctions.phpに以下のコードを追加します。

//* カスタマイズ用CSSファイルの読み込み
add_action( 'wp_enqueue_scripts', 'custom_enqueue_style' );
function custom_enqueue_style() {

    wp_enqueue_style( 'custom-style',  get_stylesheet_directory_uri() . '/custom-style.css' );

}

これでカスタマイズ用CSSファイルの読み込みも完了です。

読み込めているかどうか確認してみる

一応ちゃんとカスタマイズ用のファイルが読み込めているか確認してみましょう。

1 カスタマイズ用PHPファイルの確認

custom-functions.phpに以下のコードを追加します。

add_action( 'genesis_site_title', 'gwpf_test' );
function gwpf_test() {
    die();
}

カスタマイズ用のファイルが問題なく読み込めていれば、下の画像のようにサイトタイトル以降が非表示になるはずです。

genesis-custom-php-css-file-2

2 カスタマイズ用CSSファイルの確認

custom-style.cssに以下のコードを追加します。

こちらも問題がなければ、画面が真っ白になります(違いが分かりやすいものなら、下のコード以外のものでも大丈夫です)。

body {
    display: none;
}

3 うまく読み込まれない場合

上のPHPコードやCSSコードを入力しても、うんともすんとも言わない場合は、以下をチェックしてみて下さい。

  • ファイル名などのスペルが合っているか
  • 全角スペースがコードに入っていないか、
  • <?phpが入っているか(PHPファイルの場合)

関連記事

  • 2016年5月13日

    GenesisサイトにBody Classを追加する方法

  • 2017年12月15日

    Genesisサイトでioniconsを使用する方法

  • genesis-font-awesome-7-thumbnail
    2016年5月21日

    GenesisサイトでFontAwesomeを使う方法

  • genesis-custom-thumbnail-size-2
    2016年3月22日

    Genesisサイトに新規サムネイルサイズを追加する方法

  • genesis-action-hook-thumbnail
    2017年10月30日

    Genesisサイトのカスタマイズを便利にするアクションフックとは

  • Genesis Framework カスタマイズ
  • Genesisの設定

日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。 Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

詳しく見る
← 前の記事
【安全カスタマイズ】Genesisカスタマイズ用PHP/CSSファイルの作り方
Genesisショートコードでトップに戻るリンクを追加する方法
次の記事 →
【安全カスタマイズ】Genesisカスタマイズ用PHP/CSSファイルの作り方
Genesis子テーマのデモコンテンツをインポートする方法

最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

Genesisが好きすぎてGenesisフレームワークの情報サイトGenesis WP Fanを運営しています。日本人のためのGenesisフレームワーク専用WordPressテーマ『Muromachi』を開発しました。

Follow

サイト内検索

カテゴリー

タグ

FontAwesome Genesisの設定 Meta Muromachi ウィジェット カテゴリアーカイブ サムネイル ショートコード タグアーカイブ ツール パンくずリスト フッター プラグイン ヘッダー レイアウト 固定ページ 投稿 日本語化 検索関連 管理画面 記事一覧

PVランキング

  • 1genesis-featured-posts-widget-11

    Genesis Featured Postsウィジェットの使い方

  • 2genesis-child-themes

    Genesisフレームワークでブログを作るのに鉄板のGenesis子テーマ12選

  • 3genesis-seo-settings-4

    Genesis SEO Settings の設定方法

  • 4

    競合サイトに差をつけるGenesisサイト運営のためのプラグイン27選

  • 5genesis-logo

    Genesis Frameworkをインストールする方法

  • 6genesis

    【まずはここから】GenesisとGenesis子テーマをダウンロードする方法

  • 7

    GenesisフレームワークとGenesis子テーマを日本語化する方法

  • 8

    ここ最近人気のGenesis子テーマ10選を紹介してみる

  • 9

    【100種類目前!】変幻自在のGenesis子テーマとは?

  • 10metro-pro-settings-thumbnail

    Genesisサイトの設定方法【MetroPro】

最近の投稿

  • 店舗サイトにオススメなGenesisフレームワーク専用子テーマ6選【WordPress】

  • 調べたいサイトを丸裸にするサイト内検索とページ内検索の使い方【簡単絞り込み検索】

  • WWWって何?意外と知らないウェブについてやさしく解説【World Wide Web】

  • 仕事をするときに気をつけたいGenesisフレームワークのライセンスについて整理してみた

  • 日本人向けGenesisフレームワーク専用のWordPressテーマ「Muromachi」販売のお知らせ

  • 404ページも魅力的に簡単カスタマイズ!Genesis専用プラグインで404ページをカスタマイズする方法

  • Genesis専用子テーマ『Academy Pro』の特徴

  • ここ最近人気のGenesis子テーマ10選を紹介してみる

  • Genesisサイトの投稿にPost Classを追加する方法

  • Genesis専用プラグインでレイアウト機能を簡単に拡張する方法【Genesis Layout Extras】

目次

  • カスタマイズ用PHPファイルの作り方
    • 1 custom-functions.phpを作成
    • 2 FTPでアップロード
    • 3 custom-functions.phpを読み込み
  • カスタマイズ用CSSファイルの作り方
    • 1 custom-style.cssを作成
    • 2 FTPでアップロード
    • 3 custom-style.cssを読み込み
  • 読み込めているかどうか確認してみる
    • 1 カスタマイズ用PHPファイルの確認
    • 2 カスタマイズ用CSSファイルの確認
    • 3 うまく読み込まれない場合
ページトップへ

Copyright © 2023 Genesis WP Fan All Rights Reserved.