サポート » テーマ » 記事本文中のcssアニメーションをそのままサムネイルで表示する方法

  • 解決済 hayato-y

    (@hayato-y)


    「Simplicity」を使っています初心者です。カスタマイズ方法を知りたいです。よろしくお願いします。「本文中にアップロードされている画像に適用されているスタイル」を「一覧のサムネイル」でも適用させるカスタマイズの方法です。自ブログでは本文中の画像にマウスhoverさせるとアニメーションされるスタイルをcssで適用させています。横10連の画像を-webkit-animationで一こまづつ、マウスhoverで開始されるアニメーションです。
    これをトップページの記事一覧のサムネイルでも同じようにアニメーションさせたいと思っています。アニメーションだけではなく他のcssスタイルも取り入れるつもりなので、出来れば個別記事に埋め込まれた画像のスタイルを「そのままサムネイル画像として読み込む(div class=ごとサムネイル化する)」ことのできるようなカスタマイズ、もしくは「記事ごとにサムネイルに何らかのcssでのスタイルの指定」が出来るようにする方法、もしくは「トップページの記事一覧の部分にそのまま個別記事の全内容を(cssのdivスタイルごとの本文中画像を含む)そのまま表示する」のいづれかの方法を探しています。よろしくお願いします。

15件の返信を表示中 - 16 - 30件目 (全47件中)
  • トピック投稿者 hayato-y

    (@hayato-y)

    ありがとうございます!
    functions.phpの変更でエラー表示が消えました。
    また、

    そのファイルを開いて、

    <?php
    define(‘WP_DEBUG_LOG’, true);
    define(‘WP_DEBUG_DISPLAY’,false);
    ?>
    という定数を追加します。

    上記を実行したところ、
    Parse error: syntax error, unexpected ‘<‘ in /public_html/サイト名/wp-config.php on line 95

    が出ましたので
    define(‘WP_DEBUG_LOG’, true);
    define(‘WP_DEBUG_DISPLAY’,false);
    の部分だけ抜粋し(<?php、?>を削除し)てwp-config.phpの最後の行に付け足したところ、
    通常表示に戻りました。ありがとうございました。

    またしばらく弄ってみて、理想のサイトを作り上げようと思っています。
    ありがとうございました。

    トピック投稿者 hayato-y

    (@hayato-y)

    すいません(汗)
    新規記事投稿画面からサンプル記事を投稿するときに

    投稿画面上部に
    Warning: Missing argument 3 for raindrops_register_webfonts() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 9351
    このようなエラーが、

    投稿ボタンを押した際にこのようなエラーが出ます。
    Warning: Missing argument 3 for raindrops_register_webfonts() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 9351

    Warning: Cannot modify header information – headers already sent by (output started at /home/public_html/サイト名/wp-content/themes/raindrops/functions.php:9351) in /home/public_html/サイト名/wp-admin/post.php on line 222

    Warning: Cannot modify header information – headers already sent by (output started at /home/public_html/サイト名/wp-content/themes/raindrops/functions.php:9351) in /home/public_html/サイト名/wp-includes/pluggable.php on line 875

    簡単な画像と少しの本文を投稿しただけで、カスタムフィールド等は一切使っていません(アニメーション用CSSは子テーマから読み込ませています)。
    サイトを見ると、投稿は完了しているようで、記事は表示されています。

    何度もすいませんが、なにとぞお願いいたします。

    Warning: Missing argument 3 for raindrops_register_webfonts() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 9351

    この部分では、raindrops_register_webfonts()という関数が、保存ボタンを押したタイミングで、投稿及びタイトルで、タグが利用されている場合

    クラス属性内に、google-font-ほにゃらら といったクラスがないかどうか調べて、

    存在した場合は、カスタムフィールドに、自動インクルード用のメタ情報をセットしたり、エディタのビジュアルモードで、フォントが適用された状態で表示されるための処理を行っている部分です。

    なので、投稿本文と、タイトルにどのような内容が記述されているかによっては、エラーが出る可能性がありますが、

    これまでに、テストでは、見つかっていません。また、そのような問題の指摘もないので、

    よろしければ、本文に記述された内容、画像は添付ファイルなのか、本文内で外部画像にリンクしたものかなど、詳しい情報がないと見通しを付けられないので、

    具体的な本文の内容を教えてください。

    トピック投稿者 hayato-y

    (@hayato-y)

    ありがとうございます。

    記事はこのような内容です。

    記事題名 サンプル

    本文
    <div class=”anm1 type1″>
    <img alt=”” src=”http://サイト名/wp-content/uploads/2015/06/s_1732569.jpg”&gt;
    </div>
    サンプルです

    上の<div class>はアニメーション効果用のdivになります。
    画像は外部リンクではなく、サイト内のメディアからです。
    よろしくお願いいたします。

    トピック投稿者 hayato-y

    (@hayato-y)

    たびたびすいません。
    他のものも調べた結果、
    「テーマ」の「カスタマイズ」を選択すると、以下のようなエラーが出ました。

    Fatal error: Call to undefined method WP_Customize_Manager::add_panel() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 5055

    これと先ほどの「新規投稿」以外は目立ったエラーはないようです。

    すみませんがよろしくお願いいたします。

    トピック投稿者 hayato-y

    (@hayato-y)

    すいません、言い忘れました。
    最初のほうでサーバーはロリポップと書いておりましたが、
    現在この不具合が出ているのはFUTOKAサーバーです。
    言い遅れて申し訳ありませんが、ご了承ください。

    Fatal error: Call to undefined method WP_Customize_Manager::add_panel() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 5055

    このエラーに表示されている add_panel() メンバー関数は WordPress本体のもので
    この関数が存在しないためにエラーが出ていることから

    WordPressのバージョンが 4.0 未満であることが想像されます。

    ワードプレス本体のバージョンを調べてください。

    WordPressのバージョンが、4. 2.2である事が確認できた場合 次の事を試してみてください。

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

    $raindrops_new_customizer_support_child= true;

    この記述をした場合、現在エラーが出ているカスタマイザーとは異なるカスタマイザーが表示され、従来表示されていたテーマオプションは、表示されなくなります。

    こちらでも同様のエラーが再現するか、ご連絡いただけますか?

    記事題名 サンプル
    
    本文
    <div class="anm1 type1">
    <img alt="" src="http://サイト名/wp-content/uploads/2015/06/s_1732569.jpg">
    </div>

    この内容だと、

    Warning: Missing argument 3 for raindrops_register_webfonts() in /home/public_html/サイト名/wp-content/themes/raindrops/functions.php on line 9351

    WordPress本体が、4. 2.2であれば、のようなエラーが発生する可能性はほぼないだろうと思います。

    バージョンの確認、チャイルドテーマに変数を追加した結果をお知らせください。

    トピック投稿者 hayato-y

    (@hayato-y)

    ありがとうございます。調べたところ、バージョンは3.6.1でした。
    4.2.2に変更したところ、上記のすべてのエラーが出なくなりました。
    ありがとうございました。

    ですが、
    チャイルドテーマの functions.phpに
    $raindrops_new_customizer_support_child= true;

    こちらを試したところ、テーマカスタマイザーは正常に作動しましたが、
    チャイルドテーマの functions.phpを書き換えたとき(ファイルを更新)に

    Warning: Cannot modify header information – headers already sent by (output started at /home/public_html/サイト名/wp-content/themes/mysite/functions.php:17) in /home/public_html/サイト名/wp-includes/pluggable.php on line 1196

    が出るようになりました。
    元の記述に戻しても、エラーは出ています。
    style.css等、他のファイルを更新してもまた、同じエラーです。
    原因は何でしょうか?

    トピック投稿者 hayato-y

    (@hayato-y)

    追記
    加えて他の「テーマ」に属する設定の変更をしたときも一部出ています。
    よろしくお願いいたします。

    たぶん、

    functions.php の最後の部分の

    ?>

    の後に改行や、スペースがありませんか?

    トピック投稿者 hayato-y

    (@hayato-y)

    ・・・すいません。ありがとうございます。
    その通りで、改行があり、消したら直りました。
    何度もお手間を掛けさせまして申し訳ありませんでした。

    本当にありがとうございました。

    トピック投稿者 hayato-y

    (@hayato-y)

    どうもすみません。

    もう一つお教えいただきたく、書き込んだのですが。
    現在、段組み+アニメーション機能のついた画像という
    構成ですべてのページで表示されるようカスタマイズしています。

    そのままの設定でも Category Archives ではアニメーション機能ごと
    画像が表示になるのですが、 Search Results と 月別アーカイブ の一覧表示にすると
    Search Resultsでは画像が表示されますがアニメーションが機能しておらず、
    月別アーカイブでは画像そのものが表示されない状況です。

    上でお教えいただいた
    .home .index li{~
    以下のチャイルドテーマのstyle.cssに
    .search-results .index li{~
    のように新しいスタイルを追加してみましたが、上手く機能しませんでした。
    検索結果画面、Search Resultsと月別アーカイブの表示スタイルを指定している
    cssはどこになっていますでしょうか?

    お教えいただけますと幸いです。どうぞよろしくお願いします。

    月別アーカイブでは画像そのものが表示されない状況です

    Raindropsテーマでは、年別、月別、日別 アーカイブ表示に、date.phpというテンプレートを使い、他のループページとは異なるレイアウトになっています。

    たぶん、トップページと同じような表示に変更したいという事ですね

    チャイルドテーマのfunctions.phpに以下のコードを追加してください

    add_filter( 'template_include', 'nobita_template_include' );
    
    function nobita_template_include( $template ) {
    
        $template_sp = str_replace( 'date.php', 'index.php', $template );
    
        if ( file_exists( $template_sp ) ) {
            $template = $template_sp;
        }
        return $template;
    }

    上記のコード(フィルタと呼ばれます)は、親テーマ date.php が適用される場面で、index.phpを適用するというコードです。

    親テーマのテンプレートを削除することなく、チャイルドテーマからテンプレートのコントロールができます。

    Search Resultsでは画像が表示されますがアニメーションが機能しておらず

    なぜ、表示されないのか

    適用されたスタイルがどのようなものなのかにもよると思いますが

    Raindropsサイトの、アニメーションを使ったページでは、動作しているようです。

    http://www.tenman.info/wp3/raindrops/?s=%40keyframes

    検索結果画面について、一つ確認をしていただきたいのですが、

    カスタマイザーの概要表示セクションをクリックしていただき、

    検索結果ページの投稿本文 のラジオボタンの設定が 

    本文表示 の場合は、画像が表示されます

    概要文表示 の場合は、概要タイプの選択 で  HTML in Excerpt が選択されている時には、画像が表示されますが、WordPress Excerpt の場合は、画像が表示されません

    ので、その辺りも確認してみてください
     

    hayato-yさんとやり取りしているチャイルドテーマを使用し、

    アーカイブページを前記のコードで、テンプレートをindex.phpに置き換えた場合、

    アニメーションが動作しないという現象を確認しました。

    投稿画面のCSSエディタのスタイルが、ヘッダーに埋め込まれていないという事は解かりましたが、原因を調べるには、ちょっと時間がかかりそうです。

    そちらでも、テンプレートを変更した場合にアニメーションが動作しない または、動作した

    結果を連絡いただけるとうれしいです。

    アーカイブページを前記のコードで、テンプレートをindex.phpに置き換えた場合、

    アニメーションが動作しないという現象を確認しました。

    この問題の修正方法が判明したので、書き込んでおきます。

    https://gist.github.com/tenman/1d3c74d59e1c3b1855fd

    を、( rawボタンを押してから コピーし )チャイルドテーマのfunctions.phpに貼り付けていただくと、アニメーションが動作するようになります。

15件の返信を表示中 - 16 - 30件目 (全47件中)
  • トピック「記事本文中のcssアニメーションをそのままサムネイルで表示する方法」には新たに返信することはできません。