サポート » テーマ » テーマCorporate Plus ヘッダー画像

  • 解決済 かわねこ

    (@wpmid)


    こんにちは。wordpress初心者です。よろしくお願いします。

    テーマCorporate Plus でカスタマイザーからヘッダー画像が指定しました。

    Corporate plus


    フロントページ以外をそれぞれのアイキャッチ画像に差替えるようにカスタマイズしたいのですが
    指定すべき場所がみつけられずにいます。
    同胞のファイルを探ってみましたが、知識がなさすぎて場所がわからないため
    質問させていただきました。
    サンプルページのURLを貼りますので、お分かりになる方のご教示をお願いいたします。

    HOME

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • すみません、二行目文法がおかしくなりました。
    正しくは
    >ヘッダー画像を指定しました。
    です。

    フロントページ以外をそれぞれのアイキャッチ画像に差替える

    出来上がりのイメージが湧かないので、詳しく教えていただけませんか。

    gblsmさま、初めまして。コメントありがとうございます。
    情報不足で恐縮です。

    個別のページ(フロントページ以外の投稿・固定・アーカイブ・カテゴリーなどすべて)は
    例えば

    Hello


    のように、フロントページのトップに指定した画像をトリミングした(高さが変わった)ものが表示されます。
    このテーマの場合のヘッダー画像の指定は、WPに標準搭載のカスタム機能からできます。

    今回行おうとしているカスタマイズは
    指定した画像を(フロントページはそのままに)それぞれのページを管理画面のアイキャッチ画像の機能で指定した画像
    例えば先ほどの投稿ページならば管理画面で指定した
    http://www.artbeatpress.com/wp-content/uploads/2016/08/78224017353-768×512.jpg
    に差し替え(記事内の画像は非表示にし)たいのですが、以前に検索で参考にさせていただいた

    wordpress ページ毎のヘッダ画像をアイキャッチで変更する方法


    といった方法が、私にはうまくできません。(そもそも方法は別物なのでしょうか)

    お恥ずかしいのですが

    element.style {
        visibility: visible;
        animation-name: fadeInDown;
        background-position: center 6px;
    }
    
    .init-animate {
        visibility: hidden;
    }
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }
    .animated {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .inner-main-title {
        background-image: url('http://www.artbeatpress.com/wp-content/uploads/2016/08/cropped-40.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }


    background-image: url('http://www.artbeatpress.com/wp-content/uploads/2016/08/cropped-40.jpg');
    にたどり着けないでおります。

    また説明不足かも知れませんがよろしくお願いいたします。

    テーマのファイル acmethemes/hooks/dynamic-css.php の29行目で背景画像をセットしています。

    $custom_css .= "
      .inner-main-title {
        background-image:url('{$bg_image_url}');
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
    }";
    

    このクラス inner-main-title をテーマ内のいろいろなテンプレートで指定してあるので (検索してみてください)、フロントページを除く他のテンプレートでは別のクラスに変えるという方法がありますね。すみませんが CSS に詳しくないので具体的な変え方は示せません。

    なお、ご覧になった下記のブログ記事が対象としたテーマと Corporate Plus は内部構造が違うので、記載されている方法は当てはまりません。

    wordpress ページ毎のヘッダ画像をアイキャッチで変更する方法

    • この返信は4年、 2ヶ月前にgblsmが編集しました。
    • この返信は4年、 2ヶ月前にgblsmが編集しました。

    gblsmさま、おはようございます。
    アドバイスありがとうございます。

    このクラス inner-main-title をテーマ内のいろいろなテンプレートで指定してある

    そうなんですね。覗いてみて前述したサイトでの方法とは「構造が違う」という事は気づいておりましたが、どこから切り込んでいったらよいかわからなくなってしまいました。
    おっしゃるように

    フロントページを除く他のテンプレートでは別のクラスに変えるという方法

    がよさそうですね。(といってもその先も場所すら探せないでおります汗)
    とりあえずcssで一枚づつ乗せ変えるという非効率な方法を試してみています。

    ご質問があるのでしたらはっきりと書かれた方が良いと思いますよ。

    (といってもその先も場所すら探せないでおります汗)

    「マルチファイル検索」や「grep検索」と呼ばれる検索方法があるテキストエディターなどが便利です。Windows 用では NoEditor というものを使ったことがありますが、良いものが他にもあるでしょうね。いつもは Mac (OS X) なので Finder の検索ボックスに文字列 inner-main-title を入力すれば、その文字列が含まれるファイルを一覧表示してくれます。

    gblsmさま、おはようございます。
    質問を明確にできないまま投稿してしまい申し訳ありませんでした。
    内容から推し量ってのアドバイスありがとうございます。

    文字列 inner-main-title を入力すれば、その文字列が含まれるファイルを一覧表示してくれます。

    おかげで手持ちのエディターで検索方法(ファイル一括で行う)とキーワード(inner-main-title)を絞り込むことができました。

    テーマ同胞の acmethemes>hooks>dynamic-css.php にそのコードを見つけるところまでこぎつけました。

    <?php
    /**
     * Dynamic css
     *
     * @since Corporate Plus 1.0.0
     *
     * @param null
     * @return null
     *
     */
    if ( ! function_exists( 'corporate_plus_dynamic_css' ) ) :
    
        function corporate_plus_dynamic_css() {
    
            global $corporate_plus_customizer_all_values;
            /*Color options */
            $corporate_plus_primary_color = $corporate_plus_customizer_all_values['corporate-plus-primary-color'];
            $custom_css = '';
    
            /*background*/
            if( get_header_image() ){
                $bg_image_url = get_header_image();
            }
            else{
                $bg_image_url =   get_template_directory_uri()."/assets/img/startup-slider.jpg";
            }
            $custom_css .= "
                  .inner-main-title {
                    background-image:url('{$bg_image_url}');
                    background-repeat:no-repeat;
                    background-size:cover;
                    background-attachment:fixed;
                }";

    *後半略
    28行目に記述を見つけることができました。
    しかし下記テンプレートタグが必要ではと考えていますが、書き換え方が不明です。
    https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_post_thumbnail

    21・22行目の書き方や、位置やサイズ指定が別に必要か、あるいはここを書き換える以外の方法が正しいかも判断できていません。
    お盆中は手を付けられない為、レスポンスが鈍くなるかもしれませんがよろしくお願いします。

    私がやるなら、inner-main-title のスタイル指定(現在の dynamic-css.php のコード)は変えず、新しいクラス(と新しいスタイル指定)を作ると思います。

    まず、クラス inner-main-title は他のテンプレートにも出てきますよね。
    例えば single.php などです(これは個別投稿を表示するテンプレート)。
    参考: テンプレート階層 – WordPress Codex 日本語版
    他にも出てくるテンプレートがあるので全部探して、書き換えの要否を考えましょう。

    single.php を書き換える場合、その中に

    <div class="wrapper inner-main-title init-animate fadeInDown animated">
    

    という HTML コードがありますから、これを例えば

    <div class="wrapper my-inner-main-title init-animate fadeInDown animated">
    

    のような新しいクラス my-inner-main-title に変更して、それに新しいスタイルを指定します。
    新しく書くスタイル指定は、dynamic-css.php の今のスタイル指定(を出力するコード)を応用すればよさそうです。
    (CSS は詳しい方ではないので細かいことは触れません。)

    なお、書き換えは子テーマを利用するのをお勧めします。

    • この返信は4年、 2ヶ月前にgblsmが編集しました。

    こんにちは、
    以下のコードを、チャイルドテーマの functions.php に追加してみてください。
    https://gist.github.com/tenman/b3020a9a6ac57c901e3886038233a4c0

    忘れたので追記します。
    ヘッダー画像を、アイキャッチ画像に切り替えた場合の、投稿自体に表示されているアイキャッチの削除方法。

    チャイルドテーマのfunctions.php

    
    add_filter('post_thumbnail_html','__return_empty_string');
    

    を試してみてください。

    こんにちは。返信が遅れまして申し解りません。
    多くの貴重なアドバイスを頂きまして本当にありがとうございます。

    なおここに示しているサイト先では、親テーマのみで動かしていて子テーマ作成を割愛しておりますが、
    実際に使いたいサイトにおいては子テーマを実装しています。

    >gblsmさま、いつもありがとうございます。
    ご提案の方法は私の力量ではハードルが高く
    今回は、もとのテーマを生かしながらカスタムしたいため
    一旦断念することにしました。

    しかしテーマ作成にあたってはとても参考になることなので、
    かなり派生させたい場合や、新たにテーマ作成する時(こちらはまだまだ私には無理ですが)には
    こちらのアドバイスを参考に挑戦したいと思います。

    >nobitaさま、初めまして。
    完璧に書いてくださって大変恐縮しております。ありがとうございます!
    コメントアウトで注釈が置かれていて実にありがたいです。

    最初、テーマファイル直下の functions.php に加えたところ、アイキャッチを取得できず、すっかり混乱してしまったのですが、acmethemes>functions.php に書くことによって希望している状況になりました。

    ちなみに、一覧ページ(いわゆるブログ一覧)などにアイキャッチを指定した場合、アイキャッチではなくヘッダー画像を取得してしまうのですが、アイキャッチ画像にしたい場合はどうすればよいでしょうか。

    また

    add_filter(‘post_thumbnail_html’,’__return_empty_string’);

    の方は、テーマファイル直下の functions.php に書くことで効きました。
    しかし、デフォルトでは

    小さいアイキャッチ画像の横に抜粋テキストがセットとなった個々の投稿ページの一覧

    も、アイキャッチが表示されなくなるため、このカスタムにおいてはcssカスタムで対応する事も検討しています。

    現段階ではこの辺まで進めることができました。ありがとうございます。
    自分としては、十分なアドバイスをいただきましたので解決済みとしてもよいのですが、質問を加えているのと参考にされる方もおられるかもしれませんので、今しばらくご投稿いただけるのをお待ちしています。よろしくお願いいたします。

    • この返信は4年、 2ヶ月前にかわねこが編集しました。

    テーマファイル→テーマフォルダ
    でした。失礼しました。

    ちなみに、一覧ページ(いわゆるブログ一覧)などにアイキャッチを指定した場合、アイキャッチではなくヘッダー画像を取得してしまうのですが、アイキャッチ画像にしたい場合はどうすればよいでしょうか。

    ブログアーカイブや、カテゴリーアーカイブは、一般的には複数の投稿が表示されますので どのような方法で一覧ページ用のアイキャッチが指定されているのか解からないと(デフォルトでは、アーカイブ用アイキャッチ設定はありませんので)白旗を上げるしかありません。

    一覧ページ用のアイキャッチが指定

    をどのように行っているのか書き込んでください

    小さいアイキャッチ画像の横に抜粋テキストがセットとなった個々の投稿ページの一覧
    も、アイキャッチが表示されなくなるため、このカスタムにおいてはcssカスタムで対応する事も検討しています。

    テストはしていませんが、以下のように条件付きでの非表示を検討してみてください。

    
    add_filter(‘post_thumbnail_html’,'my_post_thumbnail_html');
    
    function my_post_thumbnail_html($html){
    	if(is_singular()){
    		return '';
    	}
    	return $html;
    }
    
    • この返信は4年、 2ヶ月前にnobitaが編集しました。
    • この返信は4年、 2ヶ月前にnobitaが編集しました。

    追記

    一覧ページ用のアイキャッチが指定
    をどのように行っているのか書き込んでください

    特に、特別な設定を行っていない場合は、body要素の Class

    
    category category-none category-885
    

    等のどれかと、組み合わせて、背景画像を上書きするのが お手軽です。

    • この返信は4年、 2ヶ月前にnobitaが編集しました。

    追記

    最初、テーマファイル直下の functions.php に加えたところ、アイキャッチを取得できず、すっかり混乱してしまったのですが、acmethemes>functions.php に書くことによって希望している状況になりました。

    テーマホルダー直下の functions.phpで動作するはずです。( corporate-plus/functions.php ) もう一度確認してください。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • トピック「テーマCorporate Plus ヘッダー画像」には新たに返信することはできません。