質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

768閲覧

ワードプレスで、カスタムヘッダーを設定する方法

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

1クリップ

投稿2018/02/09 07:47

Fluid Magazineというテーマを使っているのですが、ダッシュボードの中の「外観」内に、ヘッダーが最初から無かったので、
カスタムヘッダー機能の導入を行うために、まず、「function.php」をいじりました。

引用テキスト

add_theme_support( 'custom-header' );
を入れました。

次にヘッダーを表示させるための設定を行おうとして、「ダッシュボード」→「外観」→「テーマ編集」→「header.php」を開いて、<body>タグ内に以下のコードを追記しました。

引用テキスト

<!-- custom header --> <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <div id="header_img"> <a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a> </div> <?php endif;?>

これで更新しようとすると、コピペしただけにもかかわらず、シンタックスエラーが出てしまうので、テーマによってコピペするphpファイルが違うのかなと思い、
メインのHOMEのページに入れたかったので、「テーマ編集」の、「メインインデックスのテンプレート」(index.php)に入れました。
※先ほど「header.php」の中でコピペした <!-- custom header -->〜は消しました。

それで、ダッシュボードの中の「外観」内に戻り、ヘッダーが反映されたのでそれをクリックし、カスタマイズ内に設置された「ヘッダー画像」をックリックし、画像を新規追加しました。
すると、
一番上の(配置したい位置の)ナビゲーションバーの下ではなく、設定した「ロゴ」と「広告」の下に左ヨリで設置されてしまいます。この現象はなぜそうなってしまうのでしょうか?

配置したい位置である、ナビゲーションバーのすぐ下に入れるにはどうすれば?

ワードプレス始めたばっかりで結構わかりやすく教えて頂けると助かります。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これで更新しようとすると、コピペしただけにもかかわらず、シンタックスエラーが出てしまうので、テーマによってコピペするphpファイルが違うのかなと思い、

以下の手順を手元の環境に試したところ、シンタックスエラーが出ることなく正常に動作しました。
おそらく、最初にコードを書き加えた場所がPHPコード上で不正な位置だったものと思われます。

(1) Fluid Magazineを手元の環境に導入
(2)add_theme_support( 'custom-header' );をfunctions.phpに記載
(3)ご提示のコードをtemplate-functions.phpのfluid_magazine_header_top関数内に記載し、CSSで画像の位置とサイズを設定

PHP

1function fluid_magazine_header_top(){ 2 3 ?> 4 <div class="sticky-holder"></div> 5 <div class="header-t"> 6 <div class="container"> 7 <div id="mobile-header"> 8 <a id="responsive-menu-button" href="#sidr-main"> 9 <span></span> 10 <span></span> 11 <span></span> 12 </a> 13 </div> 14 <nav id="site-navigation" class="main-navigation" role="navigation"> 15 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?> 16 </nav><!-- #site-navigation --> 17 18 <?php $ed_search_form = get_theme_mod( 'fluid_magazine_ed_search', '1' ); ?> 19 20 <div class="right"> 21 <?php if( $ed_search_form ){ ?> 22 <div class="btn-search"> 23 <i class="fa fa-search"></i> 24 <div class="form-holder"> 25 <?php get_search_form(); ?> 26 </div> 27 </div> 28 <?php } ?> 29 <?php fluid_magazine_get_social_links(); ?> 30 </div> 31 </div> 32 </div> 33<!-- ここからコード追加 --> 34<!-- custom header --> 35<?php $header_image = get_header_image(); 36if ( ! empty( $header_image ) ) : ?> 37<div id="header_img" style="max-width: 50%; margin: 0 auto;"><!-- ヘッダ画像の位置とサイズはCSSで調整 --> 38<a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a> 39</div> 40<?php endif;?> 41<!-- ここまでコード追加 --> 42 <?php 43}

投稿2018/02/10 01:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問