サポート » テーマ » Twenty Sixteenで、ヘッダーに文字を追加するには

  • 解決済 skyleaf

    (@skyleaf)


    ヘッダー画像の上あたりに、企業の住所などを加えたいのですが、
    サイト名のdescriptionに入れるには、あまりに大きすぎて・・・。
    右端あたりにさりげなく入れたいのですが、
    デフォルトでは、ヘッダーには画像しか入れられないようになっているかと思います。

    子テーマは作ってあるのですが、
    どこをどう変更したら良いでしょうか??

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • CG

    (@du-bist-der-lenz)

    企業の住所を画像としていれるわけではなく?

    トピック投稿者 skyleaf

    (@skyleaf)

    再度の手助け、誠にありがとうございます!

    そうですね、SEO対策としてキーワードを入れ込みたいので、
    画像として表示するのでは、認識されないかと思うので・・・。

    方法はありますでしょうか?

    CG

    (@du-bist-der-lenz)

    ウィジェットを.site-brandingの中に追加してみました。
    http://wp.me/P7J14F-2

    サンプル例は、このトピックが解決後設置位置を変更します。

    • この返信は7年、 3ヶ月前にCGが編集しました。理由: トピック解決後の変更点
    トピック投稿者 skyleaf

    (@skyleaf)

    そうです!!正しくこのサンプルの様にしたいのですが、
    どうすれば良いのでしょうか??
    「ウイジェットの追加」というののやり方が分かりません。

    取りあえず、ソースコードを拝見し、318行に

    <div id=”header-widget”>
    <div id=”text-2″ class=”widget widget_text site-top-widget”>
    <h2 class=”widgettitle “>Twenty Sixteenで、ヘッダーに文字を追加するには</h2>
    <div class=”textwidget”>ヘッダー画像の上あたりに、企業の住所などを加えたいのですが、サイト名のdescriptionに入れるには、あまりに大きすぎて・・・。</div>

    というのを発見したので、これを子テーマの
    .site-brandingところのあたりに入れてみたのですが、
    全く反映されないので、入れる場所が違うのでしょうか?

    また、他に追加が必要なコードはありますでしょうか?

    CG

    (@du-bist-der-lenz)

    運用中の他サイトでは、コード書きこんだり、違う手段も使ってましたが、@skyleaf さんの疑問で、簡単な方法ないかしらとプラグインを探したら、最近更新された便利なのがありました。
    https://ja.wordpress.org/plugins/wp-custom-widget-area/

    このプラグインで新しくウィジェットを作成すると、ウィジェットを自由に扱えます。
    最終的に、Get Code で得たものを、header.php の<?php if ( get_header_image() ) : ?>の前に挿入しました。

    トピック投稿者 skyleaf

    (@skyleaf)

    なるほど!プラグインを新しくインストールするのですね。

    ということで、早速Wordpressの管理画面から、
    教えて頂いたプラグインをインストールしたのですが、

    「新しくウィジェットを作成する」というのを、どうやったら良いのかが分かりません。
    プラグイン一覧の画面から、「設定」をクリックしても、
    コードがずらっと出てくるだけで・・・。
    念のため、プラグインのホームページも見てみたのですが、
    やはり「create new widget」としか書いてありません。
    「GEt Code」というボタン?はどこにあるのでしょうか??

    何から何まで説明して頂き、済みません。

    CG

    (@du-bist-der-lenz)

    プラグインを有効化するとダッシュボードのサイドバーの、下の方にCWA Settings の項目が増えます。
    そこで、新しく作るウィジェットの名前とIDを登録します。システムが使っている名前と重複しないようにしましょう。
    @skyleafさんだと、skyleaf-widget などが良いでしょう。
    create ボタンをクリックすると、テーブルが作成されます。

    カスタム・ウィジェット・エリア、設定初歩

    トピック投稿者 skyleaf

    (@skyleaf)

    昨日は遅い時間までご返信、誠にありがとうございます。

    ウイジェットからget codeまでは無事に出来ました!
    そして、header.phpの
    </div><!– .site-branding –>の下に入れると、ちょうど良い位置に来ることが分かりました!

    ただ、何と記述して良いかが分からず・・・。
    ⓵dynamic_sidebar( ‘skyleafwidget’ );
    と入れたところ、この文字がそのまま表示されてしまい・・・。
    ただ、いっそこの場所に住所を直接、入力してしまうという手もあるのですね。

    ⓶見よう見まねで
    <get_dynamic_sidebar( ‘skyleafwidget’ );>
    と入れてみたのですが、何も表示されませんでした・・・。

    あと一歩だと思うのですが・・・何度も申し訳ありません。

    CG

    (@du-bist-der-lenz)

    ①ただ、いっそこの場所に住所を直接、入力してしまうという手もありです。しかし、それでは文面を修正しようとするたびに、PHPファイルを変更することになり不便です。
    また、住所を記載したプロフィールページを、その箇所に表示させる方法もありますが @skyleaf さんの狙い所が不明瞭だったので。
    そこで、ウィジェットの追加を提案したのです。汎用性があり、お知らせを掲示しやすいとも思いました。

    ところで、get_はデータの受け渡しだけなので、確認の必要が無いから<?php dynamic_sidebar( ‘skyleafwidget’ ); ?>です。スクリーンショットに(5)として書いておいたのですが。

    トピック投稿者 skyleaf

    (@skyleaf)

    確かに、⓵の方法では、後々面倒ですね。なるべくもうコードはいじりたくないです・・・。

    住所を記載したプロフィールページを表示させる、という方法もあるのですね。
    頭が追い付かず、すみません・・・。

    そして、貼り付け画像の下部に、丁寧な説明があったのを気付かず、
    大変失礼しました!!
    早速保存しましたので、今後の覚書にさせて頂きます。

    また、教えて頂いた通りに
    <?php dynamic_sidebar( ‘skyleafwidget’ ); ?>
    をheader.phpに入れたのですが、
    ホームページ画面に、以下のようにエラーとなって表示されてしまいました。

    Notice: Use of undefined constant ‘skyleafwidget’ – assumed ‘‘skyleafwidget’’ in
    /home/users/0/sub.jp-skyleaf/web/wp-content/themes/twentysixteen-child/header.php
    on line 46

    もう一度、ウイジェットに戻って確認したのですが、やはりskyleafwidgetとなっていますし、
    ウィジェットを一度停止し、有効化しても、同じようになってしまいます。

    CG

    (@du-bist-der-lenz)

    夜の仕事なので合間の時間にしか返事できなくて気の毒です。
    サンプルとして、「住所を記載したプロフィールページを表示させる、という方法」を2段目に示してみました。固定ページで作ったプロフィールページから抜粋を取得、表示させています。 http://wp.me/P7J14F-2

    さてエラーの原因ですが、‘‘skyleafwidget’’とダブルクウォートになっていますよ、'skyleafwidget'シングルクォートである必要があるという、ご親切注意のエラーメッセージです。

    シングルクォートが全角になっています。

    トピック投稿者 skyleaf

    (@skyleaf)

    エラーの箇所を直した所、無事に表示されました!
    入力したのは、確かにシングルクォートだったのですが、
    クォートの種類(フォント?)が違ったのでしょうか?
    ’じゃなく、’に入力し直したら入りました!!
    こんな事もあるんですね。。。

    ところが、ウィジェットは無事入ったのですが、
    ウィジェットですと、黒い仕切り線が入ってしまったり、
    原因不明の「●」が文章の頭に入力されていたりと、(箇条書きの前に付く●でしょうか?)
    ヘッダーとしてはちょっと見栄えが悪いのでやはり、直接入力にしてしまいました。
    ウィジェットは、ぜひ他の部分で活用させて頂きます!

    また、プロフィールページを表示させる方法も、ぜひ
    今後、仕様変更する際に参考に致します!(^^)!

    ご自身のページもとっても興味深く、ぜひじっくり見させて下さい!

    CG

    (@du-bist-der-lenz)

    リストの黒丸が出るのは、ウィジェット作成設定で、Advanced の Before/After widget が li の状態だと推測します。わたしは div にして試しました。※この部分のみを試しているので、プラグイン全体はほとんど試していません。

    見栄えについては、skyleafwidgetのクラスができていると思うので、スタイルを当てると整います。
    また、プロフィールページの抜粋の取得は、このウィジェットでプロフィールページの抜粋を呼び出すコードを入れています。人物情報やら、お知らせやら、複数のページで表示して利用するためによく使っています。

    最後に、このトピック解決と判断して、サンプル例はリセットします。

    トピック投稿者 skyleaf

    (@skyleaf)

    ウィジェットの黒丸を消すには、
    コードの修正画面で、教えて頂いた箇所を変えれば良いのですね。

    ウィジェット内の見栄えですが、フォントの大きさは変更できたのですが、
    行間を調節したくて、文字を入力する画面で、
    <span style=”line-height:200%”>住所</span>
    のように入れたのですが、なぜか変わらず、、
    他の箇所で、自動的に調節されてしまうのでしょうか?

    でも、このウィジェットを使えば、
    いちいちCSSの画面をいじらなくても、色々な物が入れ込めるので
    便利ですね。今後の参考にさせて頂きます!

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • トピック「Twenty Sixteenで、ヘッダーに文字を追加するには」には新たに返信することはできません。