MENU
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
ガジェット&お得なサービス情報をお届けするブログメディア「デジライン」
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
\ ポイント最大10%アップ! /
  1. ホーム
  2. ライフ
  3. ブログ運営
  4. XeoryBaseテーマに乗り換え後に必要なテーマのカスタマイズ方法

XeoryBaseテーマに乗り換え後に必要なテーマのカスタマイズ方法

2022 11/23
AD
ブログ運営



ブログのテーマを刷新しました。今までは海外ブロガーの無料テーマを使っていたのですが、カスタマイズに限界を感じて、一方でまだ有料テーマに手を出せるほど精進できていないと思っているので、今回無料ブログテーマとして有名なバズ部のXeoryBaseに変更しました。

XeoryBaseは見た目もシンプルで文字も読みやすいので、とても気に入ってるんですが、少し手直しをしてあげないと見た目が、ブログの趣向に合わない場合も出てきます。

今回は当サイトで引越し後に修正したテーマのカスタマイズ方法を備忘録として書いておきます。

目次
スポンサーリンク

子テーマを作成する

先ずは何よりも子テーマを作成しましょうね。子テーマが何かということがわかっていない方でも、今回のカスタマイズを行う場合には全て子テーマの作成手順をやってからカスタマイズすることをお勧めします。

子テーマが何なのかを簡単に説明すると、xeory_baseテーマをカスタマイズするときに、このテーマ自体のコードを変更してしまうと、今後テーマがアップデートされたときなどにカスタマイズがアップデートの度にリセットされてしまいます。変更したいファイルだけ、子テーマのフォルダに置いておけば、変更したコードの差分だけを読み込んでくれる仕様になっています。

そのため子テーマでカスタマイズをしておけば、元々のテーマをカスタマイズすることなく、かつ元ファイルのバックアップという意味でもファイルを残しておいてくれるので、とても便利ですね。

因みにここでは親テーマと言えば、xeory_baseを、子テーマと言えばxeory_base_childを指すものとします。

子テーマの作成方法は先ずはファイルマネージャーを使って、wordpressのテーマが格納されているフォルダ(public_html/サイトの名前/wp-contents/themes/)に移動して、xeory_base_childという名前のフォルダを作成します。

フォルダが作成できたら、次に以下の2つのファイルをテキストエディタなどで作成して格納してください。

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
?>

style.css

/*
Theme Name: xeory_base_child
Template: xeory_base
*/

この二つが格納し終われば、あとはダッシュボードに戻って子テーマを有効化するだけです。

トップページ&アーカイブページに続きを読むを追加する

これは何をしたいかというと、xeory_baseがデフォルトの状態の場合は、”続きを読む”ボタンが上手く配置されていない場合があります。もしくはそもそも”続きを読む”自体が表示されていないケースも発生することがあるので、この部分のコードを修正しましょう。

以下が完成図です。

先ずはxeory_baseのフォルダから、index.phpとarchive.phpのファイルをダウンロードしてきてください。

この二つのファイルの中を覗いて、以下のコードを探して

        <?php the_content('続きを読む'); ?>

以下のコードに差し替えてください。

        <?php the_excerpt(); ?>
        <a href="<?php the_permalink(); ?>" rel="nofollow" class="more-link">続きを読む</a>

差し替え終わったら、あとはこのファイルを子テーマのフォルダの直下に保存すれば修正完了です。

固定ページからアイキャッチを削除する

次に固定ページの表示方法のカスタマイズになります。Xeory Baseではデフォルトの表示方法だと固定ページにもアイキャッチを表示するようになっています。

これはサイトのデザインにもよるんですが、当サイトではあまりこの画像は要りません。固定ページはホームデザインにも関係してくるので、余計な画像は消してしまいましょう。

また同じようにxeory_baseのフォルダから今度はpage.phpのファイルをダウンロードしてきてください。そして以下のコードを削除してください。

      <?php if( get_the_post_thumbnail() ) : ?>
      <div class="post-thumbnail">
        <?php the_post_thumbnail(); ?>
      </div>
      <?php endif; ?>

ファイルが修正し終わったら、修正後のpage.phpを子テーマのフォルダxeory_base_childに保存すれば修正完了です。

投稿ページのアイキャッチのサイズを変更する

Xeory Baseのデフォルトの場合、アイキャッチ画像が右端にサムネイル表示された状態で、テキストが左に回り込むようなデザインになっています。これもサイトデザインにも寄りますが、当サイトでは邪魔なのでフルサイズで表示するように修正します。

以下が完成図になります。

ではまた同じようにxeory_baseフォルダから、今度はsingle.phpのファイルをダウンロードしてきてください。

テキストエディタでファイルを開いて、以下をコードを探してください。

        <?php if( get_the_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
          <?php the_post_thumbnail(); ?>
        </div>
        <?php endif; ?>

サムネイルの画像サイズは、the_post_thumbnailで規定されているので、ここを今回はフルサイズ(元の画像のサイズ)で表示するようにしておきます。なので、’full’と指定すればOKです。

        <?php if( get_the_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
          <?php the_post_thumbnail('full'); ?>
        </div>
        <?php endif; ?>

因みに他のサイズにしたい方は、’full’の代わりに以下のコードを差し替えればそのサイズで表示されるはずです。

the_post_thumbnail(); //パラメータ無し →’post-thumbnail’
the_post_thumbnail( ‘thumbnail’ ); サムネイル(150 × 150)
the_post_thumbnail( ‘medium’ );中サイズ(300 × 300)
the_post_thumbnail( ‘large’ ); 大サイズ(640 × 640)
the_post_thumbnail( ‘full’ ); フルサイズ(アップロードした画像サイズ)
the_post_thumbnail( array(100, 100) ); //サイズを配列で指定

修正がし終わったら、single.phpを子テーマフォルダに保存しておけば修正完了です。

ブログ運営

この記事が気に入ったら
いいね または フォローしてね!

Follow @digiline_ Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 匿名 より:
    2021年1月25日 5:08 AM

    functions.php が正解です。
    function.phpでは正常に動作しないので気をつけてください。

    返信
    • Taka より:
      2021年1月25日 12:29 PM

      その通りですね。訂正致しました。
      ご指摘ありがとうございます!

      返信

コメントする コメントをキャンセル

人気記事
  • IKEA TRADRI(トロードフリ)のリモコン/センサーが反応しない!?電球がペアリングできないときの復旧方法
    ライフハック
  • iPhoneの電池の減りが異常に早いのでバッテリー交換しに行ったら断れた話。AppleCare+未加入の人は注意しよう!
    便利なサービス
  • セゾンカードの携行品保険ならスマホもパソコンも保証!月300円のお買い物安心プラン[Y]がコスパ最強!
    保険のこと
  • Apple Watch (アップルウォッチ)向けの保険としてapplecare+はいらないよ
    保険のこと
  • iPhoneのフィールドテストモード。隠しコマンドを入れたらこうなるなんて!?【専門家が解説】
    ライフハック
新着記事
  • 【レビュー】Loop Quiet & Engage Plus|スタイリッシュな耳栓。勉強/仕事/執筆作業に最適かもしれない。
    2023年9月24日
  • 【2023年上半期ベストバイ】生活が変わる買ってよかったガジェット Best 10
    2023年9月20日
  • 【レビュー】Ulike Air3|光脱毛で解決?メンズのすね毛チクチク問題とその対処
    2023年9月18日
  • アレクサ対応のスマート家電エアコン|後付けもできるけど、おすすめはスマートリモコン!
    2023年9月18日
  • IoTシステム技術検定[上級]に合格したので、今日からIoTプロフェッショナルって名乗っていいよね?
    2023年9月16日
目次
DIGILINEオススメのサービス
TAKA
メディア監修
IoTコンサルタント&ガジェットブロガー|IoTの専門知識を活かし、スマートホーム化や最新のガジェット、生活家電のレビュー記事を執筆しています。自宅をスマートなテックハブに変えることで、効率的で便利なライフスタイルを実現しています。テクノロジーの進化に常に目を光らせ、読者の皆さんに役立つ情報を提供することに情熱を注いでいます。テクノロジーとライフスタイルを融合させる楽しさを共有し、一緒に未来のスマートライフを築いていきましょう!

レビュー依頼などはお問合せからお願いします。
新着記事
  • 【レビュー】Loop Quiet & Engage Plus|スタイリッシュな耳栓。勉強/仕事/執筆作業に最適かもしれない。
  • 【2023年上半期ベストバイ】生活が変わる買ってよかったガジェット Best 10
  • 【レビュー】Ulike Air3|光脱毛で解決?メンズのすね毛チクチク問題とその対処
  • アレクサ対応のスマート家電エアコン|後付けもできるけど、おすすめはスマートリモコン!
記事を探す
メーカーで探す
Aiseesoft Amazon Anker Apple BenQ(ベンキュー) BLUETTI Bose Broadlink Buffalo CANDY HOUSE(キャンディハウス) Coomooy DELL EaseUS FlexiSpot(フレキシースポット) Garmin(ガーミン) GenHigh Google Hysure IKEA Insta360 iRobot j5create LinkJapan Logicool LoopEarplugs MiniTool MOFT(モフト) Nature Philips PITAKA(ピタカ) QNAP Qrio(キュリオ) Rakuten Satechi(サテチ) SwitchBot(スイッチボット) TP-Link(ティーピーリンク) Tranya Ulanzi Ulike VOLTME Zenosyne お得情報 まとめ
  • DIGI LINE(デジライン)について
  • 製品レビュー依頼
  • 特定商取引法に関する表記
  • 免責事項/プライバシーポリシー
  • お問合せ

© DIGILINE (デジライン)

目次