インフォメーションバーについて

  • P

    こんにちは。
    いくら調べても分からないのですが、
    インフォメーションバーをヘッダー画像下に変更することはできますか？

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.1.1
    ご利用のサーバー名 : エックスサーバー
    PHPのバージョン : 分かりません
    OS : windows10
    ご利用のブラウザ : Firefox
    該当サイトのURL : https://www.kaori-y-t.com/

    0 1 件の返信
  • administrators

    @ponko2robo さん

    こんにちは！JIN運営チームのりょうたです。
    インフォメーションバーは基本的に画像下に持ってくることはPHPの知識がないと難しいかと思います。

    JINの仕様上ヘッダーデザインでのスタイル毎に読み込みファイルを変えているため、
    変更するにはPHPの知識が必要不可欠になります。
    以下に簡単にやり方をご説明いたしますのでご確認の上、ご対応の程お願い致します。
    ※カスタマイズは自己責任でお願い致します。

    【準備するもの】
    ⒈JIN本テーマ
    ⒉JIN子テーマ（アップデート後にも対応できるように子テーマを導入します。）
    ⒊エディター（プログラミング言語を書く専用アプリのようなものです。必要であればで構いません。）
    ４.FTP（サーバーにあるファイルとローカルのフォルダを繋げてくれる通信機能です。詳しくはこちらをご参考くださいませ。https://saruwakakun.com/html-css/wordpress/filezilla）

    【手順】
    ①選択しているヘッダースタイルを確認する
    WordPressの管理画面より「外観」→「カスタマイズ」→「サイトデザイン設定」まで飛び、
    ヘッダーデザインのスタイルが何番かを確認する。

    ※おそらく@ponko2roboさんは「スタイル9」を選択されているかと思います。
    これを覚えておいてください。

    ②JINテーマ内の「include/headerstyle」内のフォルダにあるheader-style9.phpの内容を子テーマにコピペする
    子テーマには初期状態の場合ほとんどファイルが入っていないのでまずはheader-style9.phpのファイルを複製します。

    ※この時、なぜheader-style9.phpかというと①で確認した時のヘッダーデザインが「スタイル9」だったからです。
    違う場合はその番号に準拠したファイルを作成してください。
    ※ファイル名も全く同じにしてください。

    ③子テーマに作成したファイルの階層構造を変える
    JINの本テーマに合ったheader-style9.phpは「include/headerstyle」というフォルダ内にありました。
    同じ階層構造にしないことにはファイルは正しく読み込まれませんので、子テーマでも本テーマ同様の階層構造にします。

    includeフォルダを作成しその中にheaderstyleフォルダを作成し、その中に先ほど作成したheader-style9.phpを入れてください。

    ④コピーしたheader-style9.phpの中身を書き換える
    ※ここからPHPの知識が必要です。変更を間違えるとエラーがおきサイトが真っ白になる可能性がございますので注意してください。
    ※スマホ表示の変更はしておりません。あくまでもPCでの表示が変わるだけですのでご注意くださいませ。

    コピーしたheader-style9.phpの1行目〜9行目に

    <?php if( ! is_page_template('lp.php') ) :?>
	<?php if ( ! is_mobile() ) : ?>
	<?php if ( ! get_theme_mod('cps_info_text') == null ): ?>
		<div class="cps-info-bar <?php is_animation_style(); ?>">
			<a href="<?php echo get_theme_mod('cps_info_link'); ?>"><span><?php echo get_theme_mod('cps_info_text'); ?></span></a>
		</div>
	<?php endif; ?>
	<?php endif; ?>
<?php endif; ?>

    こういった記述が見つかるかと思います。
    これを69行目にコピペし、1行目〜9行目の記述を消してください。

    階層構造やファイル名、コピペが正しく行われていればヘッダーデザインのスタイル9を選んでいる時だけ
    インフォメーションバーがヘッダー画像の下にきているかと思います。

    以上でカスタマイズは終わりとなります。
    子テーマを使ったりFTPでファイルの送受信を行う必要がありますのでなかなか難しいかもしれませんが、
    挑戦してみてください。

    もし難しい場合は、JINフォーラム内で有料でカスタマイズを依頼するか
    クラウドソーシングを使うのが早いかと思います。

    お手数お掛け致しますが、宜しくお願い致します。

    0