サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
検索結果: : add_image_size
固定ページ 1 / 2
次へ
# | 投稿タイトル | 結果情報 | 日付 | ユーザー | フォーラム |
RE: 突然、ビジュアルエディタのフォントが明朝体になってしまいました | 1 関連性 | 7か月前 | yashinomi | 不具合報告 | |
mk2様 子テーマにつきまして、情報をいただきありがとうございます。 遅ればせながら、親テーマをできる限り元に戻す → 子テーマを有効化を実施しました。 (まだ始めたばかりなので、修正箇所も少なく、無事切り替えることができました。) 早めに知ることができ、本当に良かったです。 >「Cocoon設定」-「エディタ-」の「エディタースタイル」にチェックは入っていますでしょうか。 はい、チェックは入っていました。 本トラブルについて、サイドバーの「最近の投稿」のレイアウトを変更したくて、Style.cssとfunctions.phpにコードを追加してしていたのですが、一旦完全に戻したところ、エディタ画面の表示も元に戻りました! Style.cssとfunctions.phpに追加した記述のどこかが影響していたようです、、、 まだどこが悪さしていたのか分かっていないのですが、書き加えたコードを添付させていただきます。 ■Style.css /* サイドバーの「最近の投稿」の設定 */ .recent-posts-sidebar { padding: 10px; } .recent-posts-sidebar ul { list-style-type: none; padding: 0; } .recent-posts-sidebar li { display: flex; align-items: center; margin-bottom: 15px; } .recent-posts-sidebar li a { display: flex; align-items: center; text-decoration: none; color: #333; } .recent-post-thumbnail { width: 80px; height: 80px; margin-right: 10px; object-fit: cover; /* 画像の中央をトリミングして表示 */ } .recent-post-title { display: inline-block; vertical-align: middle; } ■functions.php // サイドバー: 最近の投稿// カスタムサムネイルサイズを追加function add_custom_thumbnail_size() {add_image_size('custom-thumb', 80, 80, false); // 幅: 126px, 高さ: 63px, トリミングを有効}add_action('after_setup_theme', 'add_custom_thumbnail_size'); // カスタム「最近の投稿」関数function display_recent_posts_with_thumbnails() {$recent_posts = wp_get_recent_posts(['numberposts' => 5, // 表示する投稿数を指定'post_status' => 'publish']); if (count($recent_posts) === 0) {return;} echo '<div class="recent-posts-sidebar">';echo '<h2>最近の投稿</h2>';echo '<ul>'; foreach ($recent_posts as $post) {$post_id = $post['ID'];$title = esc_html($post['post_title']);$link = get_permalink($post_id);$thumbnail = get_the_post_thumbnail($post_id, 'custom-thumb', ['class' => 'recent-post-thumbnail']); echo '<li>';echo '<a href="' . esc_url($link) . '">';if ($thumbnail) {echo $thumbnail;} else {// サムネイルがない場合の代替画像echo '<img src="' . esc_url(get_template_directory_uri() . '/images/default-thumbnail.jpg') . '" class="recent-post-thumbnail" alt="' . $title . '">';}echo '<span class="recent-post-title">' . $title . '</span>';echo '</a>';echo '</li>';} echo '</ul>';echo '</div>';} // ショートコードを登録function register_recent_posts_with_thumbnails_shortcode() {add_shortcode('recent_posts_with_thumbnails', 'display_recent_posts_with_thumbnails');}add_action('init', 'register_recent_posts_with_thumbnails_shortcode'); 大変お騒がせして申し訳ございません。ご協力いただき、誠にありがとうございました。 | |||||
RE: 人気記事ウィジェットについて | 1 関連性 | 1年前 | Akira | Cocoonテーマに関する質問 | |
... { add_image_size( 'square-cocoon-popular-entry-card', THUMB320WIDTH, THUMB320WIDTH, true ); }); add_filter( 'get_popular_entries_thumbnail_size', function( $thumb_size ) { $thumb_size = 'square-cocoon-popular-entry-card'; return $thumb_size; }); ① でも ② でも設定後はプラグイン Regenerate Thumbnails で画像の再生成が必要です。 参考:テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える) | |||||
RE: 1200×630のアイキャッチが見切れてしまう | 1 関連性 | 2年前 | Akira | Cocoonテーマに関する質問 | |
以下のページがご参考になると思います。 インデックスページのエントリーカード テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える) 以下の部分は、1200x630 と同じアスペクト比になる数値を入力します。320x168 は、ちょうど同じアスペクト比です。 add_image_size('index_thumb', 320, 168, true); ちなみに、1200x630 の画像は、Google 検索のリッチリザルトの記事の対象外です。 参考:Article オブジェクト 適切な画像が選択されるように、アスペクト比が 16x9、4x3、1x1 の高解像度画像(幅と高さをかけて 50,000 ピクセル以上になる画像)を指定してください。 | |||||
RE: マニュアル「各部分のサムネイルサイズを変更」の注記見直しのお願い | 1 関連性 | 2年前 | 大門未知子 | 誤字・脱字報告 | |
@yhira さん サムネイル再生成の注意書きは既にあります。 掲載されているfunctions.phpのコードがそもそも何をするかの一文です。投稿タイトル「Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集」と書いてあり。以下のコードだけで一見、サムネイル自体のサイズをオリジナルサイズに変更できると思ってしまい。 単に、オリジナルサイズを設定するだけで、サムネイル再生成プラグインを実行しないと、表示サムネイルは変更されない旨を記述願えばと思います。 add_image_size('index_thumb', 320, 168, true); add_filter('get_entry_card_thumbnail_size', function (){ return 'index_thumb'; }); | |||||
RE: ショートコードの記事一覧をタイルカード表示にしたい | 1 関連性 | 2年前 | aizawa | CSSカスタマイズ相談 | |
お世話になっております。 最終的にこちらを参考に function.phpに //新着記事ウィジェットサムネイルサイズadd_image_size('new_entries_thumb', auto, auto, true);add_filter('get_new_entries_thumbnail_size', function (){return 'new_entries_thumb';}); と記述することでタイル表示にできました。 ただ上記は新着記事のサムネイルとなっているため、ショートコードで表示している記事がなぜタイル表示できたかは不明のままです。 希望通りのレイアウトになったので、ひとまずこのまま様子をみます、ありがとうございました! | |||||
RE: おすすめカードが表示されなくなりました。 | 1 関連性 | 3年前 | リフィトリー | 不具合報告 | |
@megu さん ソースコードには、出力されているので、追加CSSじゃないかと思ったのですが・・ 追加CSSを開くには、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」だったと思います。 もし、PHPの記述がそこにあったら、削除して、すぐ上にある「公開」ボタンで変更を確定してみてください。 以下のようなものです。 | |||||
サムネイル画像のサイズを変更した場合の画像がぼやけます | 1 関連性 | 4年前 | KTCK | Cocoonテーマに関する質問 | |
お世話になります。 サムネイルの画像を縦長にするために以下のURLを参考にfunction.phpに追記しました。 //インデックスエントリーカードサムネイルサイズadd_image_size('index_thumb', 170, 250, true);add_filter('get_entry_card_thumbnail_size', function (){return 'index_thumb';}); 画像がぼやけるので、以下のコードも追記しました。 function get_vertical_card_3_thumbnail_size(){return 'large';} Regenerate Thumbnailsプラグインを使用してサムネイルを再生成をおこないました。 ぼやけるのは解消されません。 何か解消する方法がありますでしょうか? よろしくお願い致します。 | |||||
RE: Regenerate Thumbnails で画像処理が完了しない | 1 関連性 | 4年前 | わいひら | ブログ相談 | |
一般的に、Retinaディスプレイ対応にするには、表示させたいサイズの2倍にする必要があるかと思います。Cocoonが一般的なインデックスのサムネイル画像サイズは320px × 180pxなので、これは明らかに小さいかと。あえて、自前でぼやけるようにカスタマイズされているように思います。 //インデックスエントリーカードサムネイルサイズadd_image_size('index_thumb', 200, 153, true); 加えて、Retinaディスプレイ対応にするのであれば、640px × 360pxとかに設定する必要があるのではないかと思います。※いずれにせよCocoonデフォルト機能を利用すればカスタマイズは不要と思います。 ただ、実物を見ていないので詳しくはわかりません(今回のケースであれば実物を見れば問題はすぐわかったかと思います)。加えて、もしそれでうまくいかなかった場合でも独自カスタマイズは、サポートの対象外とさせていただいているので、いずれにせよサポートフォーラムでの対応は難しいかもしれません。 | |||||
RE: Regenerate Thumbnails で画像処理が完了しない | 1 関連性 | 4年前 | kai tak | ブログ相談 | |
子テーマのfunction.phpに追加で記載していた以下のコードを削除したところ、正常に稼働しました。 //インデックスエントリーカードサムネイルサイズadd_image_size('index_thumb', 200, 153, true);add_filter('get_entry_card_thumbnail_size', function (){ return 'index_thumb';}); 差し当たり一件落着、ではありますが、いかにして表示サイズを変えても明瞭に表示させるかはまた考えてコードを書かなくてはいけないようですね… | |||||
RE: Regenerate Thumbnails で画像処理が完了しない | 1 関連性 | 4年前 | kai tak | ブログ相談 | |
画像サイズは基本2560*1740サイズですが、一部に低解像度の画像を使っています。が、1024サイズ以上でも画像がぼやけています。 あとは、function.phpに以下のようなコードを入れていました。このコードを削除しても画像サイズは変わりましたがぼやけたままでした。 //新着・人気・関連・ページ送りナビサムネイルサイズadd_image_size('w120_thumb', 89, 68, true);add_filter('get_post_navi_thumbnail_size', 'w120_thumb_set');add_filter('get_new_entries_thumbnail_size', 'w120_thumb_set');add_filter('get_popular_entries_thumbnail_size', 'w120_thumb_set');add_filter('get_related_entries_thumbnail_size', 'w120_thumb_set');function w120_thumb_set(){return 'w120_thumb';} このほか記事内画像やアイキャッチ画像を選択しなおしましたがいずれもぼやけたままでした。 | |||||
RE: サイドバー「人気記事」「新着記事」用のサムネイルの正方形化について | 1 関連性 | 4年前 | リフィトリー | CSSカスタマイズ相談 | |
ローカルのテストサイトで、サイドバーのサムネイルを正方形にしてみました。 以下のマニュアルページに書かれている方法で試してみました。 Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集 ただし、この方法は、子テーマの「functions.php」ファイルを書き換えるので、FTPソフトが使えない方は、ちょっと無理かもしれません。(書きこむ際にも必要ですし、トラブルが起きたときにもご自身で復旧できない可能性があります) 「functions.php」の記述を間違えると、サイトが真っ白になってしまうというトラブルになることもあるみたいですので・・ そこは、全て自己責任ということになります。 今回は、85px × 85pxで試してみました。 マニュアルページのとおりに、子テーマの「functions.php」に以下のコードを追記しました。 //新着・人気・関連記事ウィジェットサムネイルサイズadd_image_size('widget_thumb', 85, 85, true);add_filter('get_widget_entries_thumbnail_size', function (){ return 'widget_thumb';}); 「外観」→「テーマエディター」で「functions.php」を開いて追記しようとしてもできなかったので、ローカルなので、ローカルフォルダ内を辿って、直接子テーマの「functions.php」を開き、追記しました。(ということはFTPソフトでしか書きこめないのかもしれません) その後、Regenerate Thumbnailsプラグインにて、サムネイルの再生成を行いました。 サイドバーの画像は、テーマのCSSで幅を指定してありますので、サムネイルのサイズを変更した場合には、このCSSの指定も変更(子テーマのCSS等で上書き)する必要が出てきます。 サムネイルの画像サイズを変更すると画像の幅も変わるので、それに伴って、画像の右側の文字のマージン等も変更する必要も出てきます。 画像サイズの変更によって、細かい見た目の調整が要るわけです。 ちょっと、適当に雑に書いてみると、以下の辺りなのですが、これは、画像サイズや、好みにもよるので、CSSのコードを子テーマ等で上書き変更する必要があるということの参考にしかならないかと思います。 .widget-entry-cards figure { width: 85px;}.widget-entry-card-content { margin-left: 100px;} 私もローカルのテストサイトで試しただけですので、参考情報として書きこんでいます。 ですので、やってみたけど、トラブった、上手くいかない、等の書き込みをいただいても、対応できかねますので、その点はご容赦いただきますよう、お願いします。 | |||||
自動生成画像の容量肥大について | 1 関連性 | 5年前 | yasu | Cocoonテーマに関する質問 | |
... これはJpg画像では起こらず、Png画像のみで発生する現象です。おそらく、可逆圧縮されたPng画像を add_image_size で追加すると、圧縮前の容量に戻されてからリサイズされるのではないかと推測しています。 なお、EWWW Image Optimizerなどの画像圧縮系プラグインを入れている場合はこの現象は発生しません。なぜなら、自動生成後に各サムネイル画像が圧縮されるからだと思います。 サムネイル画像はインデックスカードや新着・人気・関連記事、ページ送りナビなどに使われるため、それぞれで表示される適正サイズにリサイズして容量を減らす目的で自動生成されるのだと思いますが、オリジナル画像よりも容量が増えてしまうと本末転倒のような気がします。 このことについて、もし既知の情報や解決策などがあればご教示いただけませんでしょうか。急ぎではありませんので、お時間のあるときにご検証とご回答をいただけると嬉しいです。お忙しいなかお手数をおかけしますが、どうぞよろしくお願いいたします。 | |||||
RE: モバイル用サイドバーで文字が表示されません | 1 関連性 | 5年前 | Akira | Cocoonテーマに関する質問 | |
それと、子テーマの style.css に、このようなものをお書きになっています。 add_image_size( 'thumb-square', 360, 360, true ); これは CSS ではありません。このコードが必要であれば、子テーマの functions.php に追加します。 | |||||
インデックスの写真を大きくしたい | 1 関連性 | 5年前 | riho | ブログ相談 | |
はじめまして。cocoonを利用しています。昨日固定ページを少し触ったところ、カテゴリー内のインデックスの画像が小さくなってしまいました。functions.phpに //インデックスサムネイルサイズadd_image_size('index_thumb', 320, 168, true);add_filter('get_entry_card_thumbnail_size', function (){return 'index_thumb';を入れたのですが直りません。 cocoon設定のインデックスのタブのところで、プレビューは大きい表示になっているのですが、カードタイプを選択するところが選べないようになっています。 すみませんが、解決法をご存じでしたら教えていただけませんでしょうか。よろしくお願いします。 | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
同じサイズのサムネイルを複数作成すると効率が悪いので、まとめて作成する場合は以下のようにまとめて。 //新着・人気・ページ送りナビサムネイルサイズadd_image_size('w120_thumb', 120, 63, true);add_filter('get_post_navi_thumbnail_size', 'w120_thumb_set');add_filter('get_new_entries_thumbnail_size', 'w120_thumb_set');add_filter('get_popular_entries_thumbnail_size', 'w120_thumb_set');function w120_thumb_set(){ return 'w120_thumb';} | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
人気記事ウィジェット。 //人気記事ウィジェットサムネイルサイズadd_image_size('popular_entries_thumb', 120, 63, true);add_filter('get_popular_entries_thumbnail_size', function (){ return 'popular_entries_thumb';}); | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
新着記事ウィジェット。 //新着記事ウィジェットサムネイルサイズadd_image_size('new_entries_thumb', 120, 63, true);add_filter('get_new_entries_thumbnail_size', function (){ return 'new_entries_thumb';}); | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
記事下のprev next カード //ページ送りナビサムネイルサイズadd_image_size('post_navi_thumb', 120, 63, true);add_filter('get_post_navi_thumbnail_size', function (){ return 'post_navi_thumb';}); | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
関連記事ウィジェット。 //関連記事ウィジェットサムネイルサイズadd_image_size('related_entries_thumb', 196, 103, true);add_filter('get_related_entries_thumbnail_size', function (){ return 'related_entries_thumb';}); 横幅は、小数点以下は切り捨て。縦幅の計算値は四捨五入。 | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
内部ブログカードの場合。 //内部ブログカードサムネイルサイズadd_image_size('internal_blogcard_thumb', 174, 91, true);add_filter('get_internal_blogcard_thumbnail_size', function (){ return 'internal_blogcard_thumb';}); 外部ブログカードは、WordPressのサムネイル機能を利用していないので、この方法では変更できないです。 | |||||
RE: インデックス画像などのアスペクト比にマニュアル設定をしたい場合 | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
とりあえず、数が多いので1つずつ。 まずはインデックスカード。以下のコードを子テーマのfunctions.phpに貼り付ければいけるかと思います。 //インデックスサムネイルサイズadd_image_size('index_thumb', 205, 108, true);add_filter('get_entry_card_thumbnail_size', function (){ return 'index_thumb';}); あとは、Regenerate Thumbnails等のプラグインでサムネイルを再生するする必要はあると思います。 残りは、他の返信が終わって、時間があれば1つずつ書ければと思います。 | |||||
RE: サムネイルのサイズに関して | 1 関連性 | 6年前 | miyasita | Cocoonテーマに関する質問 | |
わいひら様 アドバイス通りに作業したら希望していた形のなりました。有難うございます。 あと、もうひとつアドバイスを頂きたいのですが、インデックスの縦型カード2列のサムネイルを530×298にしようとしているのですが上手くいきません。 functions.phpに「add_image_size('thumb530', 530, 298, true);」を追加 entry-card.phpのcase 'vertical_card_2'に「$thumbnail_size = thumb530;」を記入 $thumbnail_sizeをthumb320にしたら320×180のサムネイルになったのでthumb530にすれば上手くいくかと思ったのですが、largeサイズが適用されてしまいます。 | |||||
RE: 大きなカードタイプ(先頭のみ)の大きさを変えたい | 1 関連性 | 6年前 | わいひら | CSSカスタマイズ相談 | |
まずは、子テーマのfunctions.phpに以下のコードを追記します。 add_image_size('index_top', 680, 250, true); | |||||
RE: サムネのサイズについて | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
Cocoonには、以下のようなサムネイルは、元々用意してありません。 add_image_size('thumb_120', 120,120, true); なので、見つからないのは当然かと思います。ないものは変更できず、ちょっとどういったことをしたいのかがわからないので、何とも言えないです。 | |||||
サムネのサイズについて | 1 関連性 | 6年前 | Takashi | Cocoonテーマに関する質問 | |
add_image_size('thumb_120', 120,120, true); サイズ変更したいのですが、function.phpに上記のような記載が見つかりません。 どちらを変更・追記すればよろしいのでしょうか。 よろしくお願い申し上げます。 | |||||
RE: サイドバーに表示されるサムネイル画像を全て正方形にしたい | 1 関連性 | 6年前 | わいひら | CSSカスタマイズ相談 | |
新着・人気のコードを消して伝えていただいたものを書いたところ、新着が正方形になり人気が元の長方形に戻りました。 元々、僕が書いたコードでどういった動作をするのかを知りたかったので、「新着記事」のみが正方形になるのは想定内です。 その上で、以下のテーマファイルでアップデートして、 あとは子テーマfunctions.phpの追加コード部分を以下のコードに差し替えることでで大丈夫になると思います。 //以下に子テーマ用の関数を書く add_image_size('thumb_name', 200,200, true); function get_entry_card_thumbnail_size(){ return 'thumb_name'; } function get_widget_entries_thumbnail_size($entry_type = ET_DEFAULT){ return 'thumb_name'; } | |||||
RE: サイドバーに表示されるサムネイル画像を全て正方形にしたい | 1 関連性 | 6年前 | かきうち | CSSカスタマイズ相談 | |
//人気記事のサムネイルサイズ の部分のコードを再び書いたところ、新着・人気両方のサムネイルが正方形になりました! phpの知識が無く、それらしい英単語が書いてあるコードを切り貼りしたのでいらない部分があるかもしれません。 //以下に子テーマ用の関数を書くadd_image_size('thumb_name', 200,200, true);add_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';}function get_widget_entries_thumbnail_size($entry_type = ET_DEFAULT){ return 'thumb_name';}//人気記事のサムネイルサイズfunction get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){$thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;} | |||||
RE: サイドバーに表示されるサムネイル画像を全て正方形にしたい | 1 関連性 | 6年前 | かきうち | CSSカスタマイズ相談 | |
//以下に子テーマ用の関数を書くadd_image_size('thumb_name', 200,200, true);add_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';}function get_widget_entries_thumbnail_size($entry_type = ET_DEFAULT){ return 'thumb_name';} 遅くまでお疲れ様です。 正方形の画像ばかりを投稿する予定なので、サムネイルはサイドバーだけでなく全て正方形に表示されて大丈夫です! 新着・人気のコードを消して伝えていただいたものを書いたところ、新着が正方形になり人気が元の長方形に戻りました。なので、 | |||||
RE: サイドバーに表示されるサムネイル画像を全て正方形にしたい | 1 関連性 | 6年前 | かきうち | CSSカスタマイズ相談 | |
//以下に子テーマ用の関数を書くadd_image_size('thumb_name', 200,200, true);add_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';}//新着記事のサムネイルサイズfunction get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}//人気記事のサムネイルサイズfunction get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;} | |||||
新着記事ウイジェットの画像サイズ変更ができない | 1 関連性 | 6年前 | タツキ | CSSカスタマイズ相談 | |
お世話になります。 ウィジェット新着記事の大きなサムネイルサイズ縦横比維持 こちらのページを参考に、function.phpに以下を追記してみたのですが、 add_image_size('thumb_320_raw', 320,0, false);function get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){$thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb120' : 'thumb320_raw';return $thumb_size;} 画像のサイズは変わらず、初期設定の320*180のサイズでクロップされた画像が表示されてしまいます。画像を削除→アップロードして設定しなおし、Regenerate Thumbnailsも使用してみましたが変化有りません。 そもそも全く見当違いの事をやっているのか…見当もつかないのでお手数ですがアドバイスいただけませんでしょうか。 該当箇所のソースのキャプチャを貼っておきます。 | |||||
RE: トップページのサムネイルサイズと画質について | 1 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
縦型カード3列の場合は、子テーマにこんな感じで書けばOKかと思います(2列の場合は別の書き方がある)。 //サムネイルの作成 add_image_size('index_thumb', 500, 282, true); function get_vertical_card_3_thumbnail_size(){ return 'index_thumb'; } コード変更後は、こちらのプラグイン操作も行ってください。 | |||||
アイキャッチ画像の表示が期待通りになりません | 1 関連性 | 6年前 | 河童 | Cocoonテーマに関する質問 | |
期待通りでないのはこちらのサイトです。 アイキャッチ画像を150x150にしたかったので、function.phpに次を追加し、 add_image_size('eye_catch', 150,150, true); function get_entry_card_thumbnail_size(){return 'eye_catch';} Regenerate Thumbnailsプラグインでサムネイルを作成しました。 でもアイキャッチ画像は150x150のものを引き伸ばしています。まだ何か設定が不足しているのでしょうか。 | |||||
RE: サムネイルの画像サイズの変更 | 1 関連性 | 6年前 | かうたっく | Cocoonテーマに関する質問 | |
フォーラム内検索でadd_image_sizeと入力した場所に色々書いてるので、不明点があれば解決するかも?しれません。 | |||||
RE: サムネイルの画像サイズの変更 | 1 関連性 | 6年前 | かうたっく | Cocoonテーマに関する質問 | |
CSSではできなかったと思います。 PHPファイルをさわるのですが、以下を参考にして任意の幅・高さの画像を再生成してみる感じかと思いますよ。 そういった場合は、子テーマのfunctions.phpに以下のように記述します。 add_image_size('thumb_name', 200,200, true); そして、プラグインを用いてサムネイルの再生成を行います。 テーマが利用しているサムネイルを再生成して最適化する方法 そして最後に、子テーマのfunctions.phpに以下のように記述すればいけるかと思います。 function get_entry_card_thumbnail_size(){ return 'thumb_name'; } thumb_nameと、画像サイズは好みのものに変更してください。 元のサイズは320,180 っぽいです。 元サイズの確認先は以下 | |||||
RE: ブログカードのデザイン変更 | 1 関連性 | 6年前 | かうたっく | CSSカスタマイズ相談 | |
Cocoon: blogcard-in.php (lib/blogcard-in.php)で指定されている内部リンクブログカードの画像を任意の大きさに指定したモノに変更したら良いかと思います。 add_image_size それに合わせて高さを変える必要があれば、変えてみるなど。 子テーマfunctions.phpに追記すればOKです。 | |||||
RE: スマフォでインデックス画面にアクセスするとカードのサムネイル画像が表示されません | 1 関連性 | 6年前 | わいひら | 不具合報告 | |
ただ、以下のコード挿入で問題ないようであれば、それでも全然大丈夫だと思います。 add_image_size('thumb342', 342, 192, true); 難点といえば、以下ぐらい。 ディスク容量がいる(小さな画像サイズなのでそこまでではないと思うけど) アップロードに多少時間がかかる(同上) 反面、以下のような利点もあるのでプラマイゼロのような感じです。 幅が342px付近の端末で表示すると、画像が多少綺麗になるかも | |||||
RE: スマフォでインデックス画面にアクセスするとカードのサムネイル画像が表示されません | 1 関連性 | 6年前 | OhZoo | 不具合報告 | |
わいひらさん さっそくのご確認ありがとうございます. そちらでは再現しないんですね. こちらでも再度, プラグインを全て停止 キャッシュのクリア をやってみましたが,相変わらずsrcsetに342x192が出力されています. 「Cocoon」を導入したのが一昨日前で,Ver. 0.7.5からでした. 「Simplicity」のときは2列で使っていましたが,「Cocoon」インストール後は,いろいろなカードタイプを試したので,2列も使ったかもしれません. add_image_size('thumb342', 342, 192, true); で回避できているので,もう少し調べてみます. | |||||
スマフォでインデックス画面にアクセスするとカードのサムネイル画像が表示されません | 1 関連性 | 6年前 | OhZoo | 不具合報告 | |
わいひらさん 正式版のリリースおめでとうございます. さっそく使わせていただいていただいています. さて,以下の症状が発生しました. ・コンテンツ幅:800・カードタイプ:縦型カード3列 を設定し,Regenerate Thumbnailsプラグインでサムネイル画像を再生成しました. その後,インデックス画面(トップページ)にスマフォでアクセスすると,ほとんどのカードのサムネイル画像が表示されません. パソコンでアクセスすると正しくサムネイル画像が表示されます. インデックス画面のHTMLソースを確認したところ, srcset="http://***/aaaa-342x192.jpg 342w” の記述がありましたが,aaaa-342x192.jpgが生成されていません. Regenerate Thumbnailsプラグインの画面(添付ファイル)を見ても,このサイズの表記がありません. 試しに,子テーマのunctions.phpに, add_image_size('thumb342', 342, 192, true); と記述した後,再度,Regenerate Thumbnailsプラグインを実行すると,342x192サイズの画像が生成されました. その後,スマフォでインデックス画面にアクセスすると,カードのサムネイル画像も表示されるようになりました. Ver. 1.0.0も同様の症状のようです.ご確認ください. | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | かうたっく | CSSカスタマイズ相談 | |
add_image_size('thumb_120', 120,120, true); add_image_size('thumb_320', 320,320, true); //新着記事のサムネイルサイズ function get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size; } //人気記事のサムネイルサイズ function get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size; } add_image_size('thumb_name', 200,200, true); //entry_card_thumbnail function get_entry_card_thumbnail_size(){ return 'thumb_name'; } add_image_size('thumb_160', 160,160, true); //internal_blogcard_thumbnail function get_internal_blogcard_thumbnail_size(){ return 'thumb_160'; } コピペしてみたんですが、これならエラーは出ませんでした。 get_internal_blogcard_thumbnail_sizeですが、追記されるのであれば、以下を消して任意のサイズを入れると良いと思います。 add_image_size('thumb_160', 160,160, true); //internal_blogcard_thumbnail function get_internal_blogcard_thumbnail_size(){ return 'thumb_160'; } ブラウザによってコピペがうまくいかなかったら困るので、念のためソースコードを貼っておきます。 | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | naigasiro | CSSカスタマイズ相談 | |
かうたっく様わいひら様 お世話になります。お手数おかけしてしまい申し訳ございません。 以下に既存のコードとエラーメッセージについて記載しますので、ご確認お願いいたします。 ■現在のfunctions.php内コード //以下に子テーマ用の関数を書くadd_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);//新着記事のサムネイルサイズfunction get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}//人気記事のサムネイルサイズfunction get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}add_image_size('thumb_name', 200,200, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';} ■追加コード1 add_image_size('thumb_160', 160,160, true); function get_internal_blogcard_thumbnail_size(){ return 'thumb_160';} ■エラーメッセージ ファイルの21行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。 syntax error, unexpected 'add_image_size' (T_STRING) ■追加コード2 function get_internal_blogcard_thumbnail_size(){ return 'thumb_320';} ■エラーメッセージ ファイルの21行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。 syntax error, unexpected 'function' (T_FUNCTION) 以上です。お手数おかけしますが何卒よろしくお願いいたします。 | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | かうたっく | CSSカスタマイズ相談 | |
//以下に子テーマ用の関数を書くadd_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);//新着記事のサムネイルサイズfunction get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}//人気記事のサムネイルサイズfunction get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}add_image_size('thumb_name', 200,200, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';} 子テーマfunction.phpにあるコードはこれ以外にはありませんか? function のように部分が同じコードが重複して存在すればエラーが出るかと思われますが、最新バージョンでの確認はしてませんが子テーマ側の記載がどうなっているかと思いまして。 ない可能性もあるとは思いますが、サーバーのキャッシュが残っていて、以前重複したコードを表示している可能性はありませんか?? 分かりませんが、ご確認いただけたらその可能性はない!!と断言できるのでエラーの原因がしぼりやすくなると思います。 | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | naigasiro | CSSカスタマイズ相談 | |
わいひら様 ご連絡ありがとうございます! ブログカードに関してもご対応いただきありがとうございます! ただ今アップデートしてコードの追加を試させていただきました。ご教示いただきました「関数の多重定義エラー」が表示されてしまいます。 素人ながら調べてみたのですが、現在function.phpにある不要なコードの削除、もしくは既存のコードへの追記方法がわかりませんでした。 以下、現在function.phpにあるコードです。 //以下に子テーマ用の関数を書くadd_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);//新着記事のサムネイルサイズfunction get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}//人気記事のサムネイルサイズfunction get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size;}add_image_size('thumb_name', 200,200, true);function get_entry_card_thumbnail_size(){ return 'thumb_name';} 度々の問い合わせとなり大変申し訳ございません。この点についてご教示よろしくお願いいたします。 基本的にCocoonは、ユーザーさんがカスタマイズしやすいように、デフォルト状態ではシンプルなデザインを採用しています。ですので、むしろ自由にカスタマイズして利用して欲しいぐらいなので、全然問題ないです。 こちらに関してもご回答いただきありがとうございます。大切に使用させていただきます。 | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | わいひら | CSSカスタマイズ相談 | |
あと、内部ブログカードのサムネイルは、以下のファイルでアップデートします。 その後、以下のコードも子テーマのfunctions.phpに追加します。 add_image_size('thumb_160', 160,160, true);function get_internal_blogcard_thumbnail_size(){ return 'thumb_160';} サムネイルをあまり多く作成したくない場合は、以下だけでも良いかと思います。 function get_internal_blogcard_thumbnail_size(){ return 'thumb_320';} 今回はこのコードは必要ないでしょうか。 これは、同じ関数名のコードを追加したら、関数の多重定義のエラーは出ます。不要な方は削除してください。 また今回せっかくのわいひらさんの新しいデザインと逆行するようなカスタマイズのお願いとなり申し訳ございませんでした。 基本的にCocoonは、ユーザーさんがカスタマイズしやすいように、デフォルト状態ではシンプルなデザインを採用しています。ですので、むしろ自由にカスタマイズして利用して欲しいぐらいなので、全然問題ないです。 | |||||
RE: サムネイルなど画像サイズの正方形化 | 1 関連性 | 7年前 | かうたっく | CSSカスタマイズ相談 | |
ブログカード 以下のようなエントリーカードの画像の事ですよね。 エントリーカード使用時のアイキャッチ画像について#post-1964 そういった場合は、子テーマのfunctions.phpに以下のように記述します。 add_image_size('thumb_name', 200,200, true); そして、プラグインを用いてサムネイルの再生成を行います。 テーマが利用しているサムネイルを再生成して最適化する方法 そして最後に、子テーマのfunctions.phpに以下のように記述すればいけるかと思います。 function get_entry_card_thumbnail_size(){ return 'thumb_name'; } thumb_nameと、画像サイズは好みのものに変更してください。 このカスタマイズをやってみるとどうですか? サイドバー 新着記事・人気記事ですね。子テーマfunctions.phpに追記 add_image_size('thumb_120', 120,120, true);add_image_size('thumb_320', 320,320, true);//新着記事のサムネイルサイズ function get_new_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size; } //人気記事のサムネイルサイズ function get_popular_entries_thumbnail_size($entry_type = ET_DEFAULT){ $thumb_size = ($entry_type == ET_DEFAULT) ? 'thumb_120' : 'thumb_320'; return $thumb_size; } 工程はわいひらさんの書いた(引用)通りです。 ページ送りなどに表示される画像を正方形化 Cocoon設定、『投稿』タブより下へスクロールした『ページ送りナビ設定』の表示タイプをサムネイル正方形にすれば良いと思います。 変化がないのは、何かのキャッシュが残ってる可能性などないですか? サーバー側のキャッシュ機能がある場合は、クリアにしてみてはどうでしょう? | |||||
テーマで作成される画像の自動作成について | 1 関連性 | 7年前 | さくら | Cocoonテーマに関する質問 | |
... 2) コメントアウトで作成されないようになってる、サムネイルの指定は今後使用する予定でしょうか? Retina対応のモノは将来的に使うだろうなと思うのですが、その他のモノ // add_image_size('thumb360_raw', 360, 0, false);// add_image_size('thumb375_raw', 375, 0, false);// add_image_size('thumb768_raw', 768, 0, false); は何だろう?という、これは単なる純粋な疑問なのですが……。 ところで、お体は回復されましたでしょうか? この質問は全然急ぎではありません。ご無理をなさらない範囲で十分ですので、お時間があるときにでもお願いします。 | |||||
RE: エントリーカード使用時のアイキャッチ画像について | 1 関連性 | 7年前 | わいひら | Cocoonテーマに関する質問 | |
そういった場合は、子テーマのfunctions.phpに以下のように記述します。 add_image_size('thumb_name', 200,200, true); そして、プラグインを用いてサムネイルの再生成を行います。 テーマが利用しているサムネイルを再生成して最適化する方法 そして最後に、子テーマのfunctions.phpに以下のように記述すればいけるかと思います。 function get_entry_card_thumbnail_size(){ return 'thumb_name'; } thumb_nameと、画像サイズは好みのものに変更してください。 | |||||
RE: 関連記事・人気記事のエントリーカードにおいてobject-fitが効かない件について | 0 関連性 | 6か月前 | わいひら | CSSカスタマイズ相談 | |
元々関連記事などに出力されている画像はトリミングされたものしかないので、画像のアスペクト比を保ったまま出力させるのであれば、元画像を使うしかないかと思います。 以下のようなコードを子テーマのfunction.phpに書いてCSSを当てる感じになるかと思います。 add_filter( 'post_thumbnail_size', function($size, $post_id){ return 'full'; }, 10, 2); ※関連・新着・人気記事以外も全てがフルサイズ(元画像)になります。※画像が大きすぎる場合は、add_image_sizeで画像サイズを指定して、$crop = false で新たなサムネイルサイズを定義して指定する必要があるかと思います。※アイキャッチが指定されていないとき(いわゆるNO IMAGE)のケースには対応していません。 | |||||
RE: サムネイル画像のサイズを変更した場合の画像がぼやけます | 0 関連性 | 4年前 | KTCK | Cocoonテーマに関する質問 | |
はる様、わいらひ様 ご返答、ありがとうございます。 add_image_sizeのサイズを大きくすることで、ぼやけるのが解消されて、 綺麗に表示できるようになりました。 ありがとうございました。 | |||||
RE: 自動生成画像の容量肥大について | 0 関連性 | 5年前 | わいひら | Cocoonテーマに関する質問 | |
Cocoonが使用しているadd_image_sizeは、WordPress自体の関数を利用しています。なのでテーマ側で画像圧縮の仕様は変更していません。ですので、それに関してはWordPress開発時に連絡して改善していただくしかないかもしれません。 解決策は書かれている通り、EWWW Image Optimizerで良いのではないでしょうか。 | |||||
RE: 自動画像生成につきまして。 | 0 関連性 | 6年前 | わいひら | Cocoonテーマに関する質問 | |
WordPressの画像フォルダを開いた時に同じ画像の名前がズラッと並んでいるのを見て「なんじゃこりゃ!」とすごく違和感を感じました。 WordPressとはそういうものかもしれません。それを言い出したら、いろいろな部分を開いたら、もっとおかしな部分もあると思うので消す必要があるかもしれませんね。不必要なものが他にも結構あるので。 サムネイルは、add_image_sizeで追加されているので、remove_image_sizeで不要なサムネイルサイズを削除しておくと良いかもしれません。 |
固定ページ 1 / 2
次へ
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。