Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

サムネイルなど画像サイズの正方形化
 
共有:
通知
すべてクリア

[解決済] サムネイルなど画像サイズの正方形化

14 投稿
4 ユーザー
6 Reactions
13.7 K 表示
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

いつも大変お世話になっております!

最近SimplicityからCocoonにテーマ変更させていただきました。

ブログカードやサイドメニューの記事リストの画像が横長なので、
全て正方形に変更しようと思い、以下を試してみました。

ページ送りのサムネイル画像のサイズについて

テーマが利用しているサムネイルを再生成して最適化する方法

エントリーカード使用時のアイキャッチ画像について

手順が間違っているのか、変化がないので現状このままになっております。

サイトURL

また他のページでは記事によって画像サイズが違うので見た目がよくありません。
(この点もプラグインで再生成を試みましたが変化ありませんでした。)

画像サイトが統一されていないページのURL

つきましては大変お手数おかけしますがブログカード、サイドバー、ページ送りなどに表示される画像を正方形化するための方法をご教示いただければと思います。

こちらは不具合ではないと思いますが、念のため環境情報をお知らせします。

----------------------------------------------
サイト名:Health-with-Supplements.com
サイトURL: https://www.health-with-supplements.com
ホームURL: https://www.health-with-supplements.com
コンテンツURL: https://www.health-with-supplements.com/wp-content
インクルードURL: https://www.health-with-supplements.com/wp-includes/
テンプレートURL: https://www.health-with-supplements.com/wp-content/themes/cocoon-master
スタイルシートURL: https://www.health-with-supplements.com/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.6
PHPバージョン:7.0.18
ブラウザ:Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja
----------------------------------------------
テーマ名:Cocoon
バージョン:0.6.9
カテゴリ数:7
タグ数:60
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.0.7
BackWPup 3.5.1
Contact Form 7 5.0.2
Google XML Sitemaps 4.0.9
Multi Plugin Installer 1.2.1
Regenerate Thumbnails 3.0.2
Search Regex 1.4.16
Shortcodes Ultimate 5.0.4
SiteGuard WP Plugin 1.4.3
TablePress 1.9
Ultimate TinyMCE 5.7
WebSub/PubSubHubbub 2.2.2
WordPress Related Posts 3.6.4
WP Multibyte Patch 2.8.1
----------------------------------------------


   
引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

ブログカード

以下のようなエントリーカードの画像の事ですよね。

https://gyazo.com/43f4bc15d2795740c3b9bfd9b2933c26

エントリーカード使用時のアイキャッチ画像について#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設定、『投稿』タブより下へスクロールした『ページ送りナビ設定』の表示タイプをサムネイル正方形にすれば良いと思います。

変化がないのは、何かのキャッシュが残ってる可能性などないですか?

サーバー側のキャッシュ機能がある場合は、クリアにしてみてはどうでしょう?


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

とりあえず、一つ一つということで、まずはかうたっくさんが書かれた方法を試してみてください。
それが実装できるようであれば、内部ブログカードの方も対応させようと思います。
※外部ブログカードは、先方の画像になるのでサイズ変更はできません。


   
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

かうたっく様
わいひら様

ご回答いただきありがとうございます!

エントリーカードの画像についてはほぼ正方形になりました。
再生成後にキャッシュをクリアしても統一されない画像がありますが、これは数が少ないので元の画像自体を変更して対応したいと思います。

エントリーカードのサムネイルが大きく感じるのでトピックを参考に以下のコードをfunction.phpに追記しようとするとエラーメッセージが表示されてしまいます。
今回はこのコードは必要ないでしょうか。

function get_entry_card_thumbnail_size(){
return 'medium';
}

参考トピック
エントリーカード使用時のアイキャッチ画像について

エラーメッセージ
「PHP コードの変更をロールバックしました。修正し、もう一度保存してください。 」

 

サイドメニューの画像、新着記事、人気記事の画像に関してかうたっくさんにご教示いただいた方法でしっかり「正方形化」されました!
ありがとうございます。

ページ送り画像の正方形化に関して、大変申し訳ございません。
投稿の設定でできたんですね…気が付かず大変お手数おかけしました。

わいひらさんの「内部ブログカード対応」に関しても、お忙しい中大変申し訳ございませんが可能でしたらよろしくお願いいたします。

現状、以下の課題があります。

・エントリーカードの画像サイズの指定。(縮小)

・内部ブログカード画像の正方形化。
(サイト下部の関連記事内の画像の正方形化)

上記お手すきの際でかまいませんのでご回答よろしくお願いいたします。


   
返信引用
(@takayuki)
Eminent Member Registered
結合: 7年前
投稿: 20
 

横から失礼します。

・エントリーカードの画像サイズの指定。(縮小)

というのは、下の添付画像のような状態のことでしょうか?

もしそうでしたら、子テーマのスタイルシートに

.entry-card-thumb {
width: 200px;
}

.entry-card-content {
margin-left: 210px;
}

と指定するとできると思います。

200pxという数値はサムネイルのサイズにしています。

数値はお好みのサイズに変更してくだい。


   
TM_BB and わいひら reacted
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

takayuki様

ご回答いただきありがとうございます!

ご教示いただきました通りスタイルシートへコードを追記したところ、画像が縮小されておりました!

 

皆様のお力添えで自分の思う通りの表示になりました。
ありがとうございます!

画像のサイズに関しては既存のトピックをしっかり参考していればできていた面もあると思います。

かうたっくさん、わいひらさんにご迷惑おかけしてしまい申し訳ございません。

また今回せっかくのわいひらさんの新しいデザインと逆行するようなカスタマイズのお願いとなり申し訳ございませんでした。

これからもよろしくお願いいたします!


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

あと、内部ブログカードのサムネイルは、以下のファイルでアップデートします。
https://github.com/yhira/cocoon/archive/master.zip
その後、以下のコードも子テーマの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は、ユーザーさんがカスタマイズしやすいように、デフォルト状態ではシンプルなデザインを採用しています。ですので、むしろ自由にカスタマイズして利用して欲しいぐらいなので、全然問題ないです。


   
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

わいひら様

ご連絡ありがとうございます!

ブログカードに関してもご対応いただきありがとうございます!

ただ今アップデートしてコードの追加を試させていただきました。
ご教示いただきました「関数の多重定義エラー」が表示されてしまいます。

素人ながら調べてみたのですが、現在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は、ユーザーさんがカスタマイズしやすいように、デフォルト状態ではシンプルなデザインを採用しています。ですので、むしろ自由にカスタマイズして利用して欲しいぐらいなので、全然問題ないです。

こちらに関してもご回答いただきありがとうございます。大切に使用させていただきます。

 

 


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 
//以下に子テーマ用の関数を書く
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  のように部分が同じコードが重複して存在すればエラーが出るかと思われますが、最新バージョンでの確認はしてませんが子テーマ側の記載がどうなっているかと思いまして。

ない可能性もあるとは思いますが、サーバーのキャッシュが残っていて、以前重複したコードを表示している可能性はありませんか??

分かりませんが、ご確認いただけたらその可能性はない!!と断言できるのでエラーの原因がしぼりやすくなると思います。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17391
 

できれば、エラーメッセージをそのまま貼っていただければと思います(ファイルパスなどにユーザー名が含まれている場合は伏字にして)。
基本的に、エラーメッセージが出力されている行の関数と同じ関数名のものを検索などで探し出して、不要な方の関数を削除すれば改善されるかと思います。


   
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

かうたっく様
わいひら様

お世話になります。
お手数おかけしてしまい申し訳ございません。

以下に既存のコードとエラーメッセージについて記載しますので、
ご確認お願いいたします。


■現在の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)


以上です。
お手数おかけしますが何卒よろしくお願いいたします。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 
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';
}

ブラウザによってコピペがうまくいかなかったら困るので、念のためソースコードを貼っておきます。

https://notepad.pw/2w1y8emp


   
わいひら reacted
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

かうたっく様

ご回答いただきありがとうございます!

いただいたコードでエラーメッセージは表示されませんでした。
ご調査いただきありがとうございます!

アップデートがうまくいっていないためか、内部ブログカード、記事最下部の関連記事の画像が正方形になりませんでした。

もう一度アップデートまわりの点など確認してみます。


   
わいひら reacted
返信引用
(@naigasiro)
Eminent Member Registered
結合: 7年前
投稿: 30
トピックスターター  

お世話になっております!

ちょっと素人ながらいろいろ試してみましたが
内部ブログカードと関連記事の画像サイズの正方形化は難しかったです…

それでも皆さまのご協力あって各画像の正方形化は実現しました!
ありがとうございます。

また今後ともよろしくお願いいたします!


   
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました