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カスタマイズ依頼

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

モバイル(iPhone 14)でのイン...
 
共有:
通知
すべてクリア

[解決済] モバイル(iPhone 14)でのインデックスページの表示崩れに関して

12 投稿
2 ユーザー
5 Reactions
466 表示
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

インデックスページのエントリーカード表示のデザインカスタマイズ(entry-card.php)をおこなったところ、iPhone14でエントリーカードが途中で切れて表示されてしまうようになってしまいました。アンドロイド端末(google pixel3a)では問題なく表示されるのですが、どこをどういじったら良いのかが分からず・・・。(少し前ではありますが、iPhoneSEでも問題なく表示されていたのは確認しております)

エントリーカードの縦幅を指定・調整するには、どのファイルをいじったら良いのでしょうか?

以下に公開済のサイトURLを記載させていただきます(スマホ専用サービスのため、PC・タブレットは弾いてしまっております)。

https://shiraokamembers.com/

 

■環境情報

----------------------------------------------
サイト名:白岡メンバーズ
サイトURL: https://shiraokamembers.com
ホームURL: https://shiraokamembers.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:6.5.3
PHPバージョン:8.1.22
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.7.0
カテゴリー数:4
タグ数:46
ユーザー数:457
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:10089 バイト
functions.phpサイズ:4077 バイト
----------------------------------------------
Gutenberg:1
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
----------------------------------------------
利用中のプラグイン:
Contact Form 7 5.8.7
Custom Field Suite 2.6.5
Delete Me 3.1
WP-Members 3.4.9.1
----------------------------------------------

 

■entry-card.phpのソース

------------------------------------------

<?php //エントリーカード
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit;
$article_id_attr = null;
if (is_front_page_type_index()) {
$article_id_attr = ' id="post-'.get_the_ID().'"';
}
?>

<a href="<?php echo esc_url(get_the_permalink()); ?>" class="entry-card-wrap a-wrap border-element cf" title="<?php echo esc_attr(get_the_title()); ?>">
<article<?php echo $article_id_attr; ?> <?php post_class( array('post-'.get_the_ID(), 'entry-card','e-card', 'cf') ); ?>>
<figure class="entry-card-thumb card-thumb e-card-thumb">
<?php
//サムネイルタグを取得
$thumbnail_tag =
get_the_post_thumbnail(
get_the_ID(),
get_entry_card_thumbnail_size($count),
array(
'class' => 'entry-card-thumb-image card-thumb-image',
'alt' => '',
)
);
// サムネイルを持っているとき
if ( has_post_thumbnail() && $thumbnail_tag ): ?>
<?php echo $thumbnail_tag; ?>
<?php else: // サムネイルを持っていないとき ?>
<?php echo get_entry_card_no_image_tag($count); ?>
<?php endif; ?>
<?php the_nolink_category(null, apply_filters('is_entry_card_category_label_visible', true)); //カテゴリーラベルの取得 ?>
</figure><!-- /.entry-card-thumb -->

<div class="entry-card-content card-content e-card-content">
<h2 class="entry-card-title card-title e-card-title" itemprop="headline"><?php the_title() ?></h2>
<?php //スニペットの表示
if (is_entry_card_snippet_visible()): ?>
<div class="entry-card-snippet card-snippet e-card-snippet">
<?php echo get_the_snippet( get_the_content(''), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>
<div class="a0001">
<?php echo post_custom('coupon1'); ?></div>

<section>
<div class="flex-row">
<div class="a0002"><?php echo post_custom('shop'); ?></div>
<div class="a0003"><?php echo post_custom('address'); ?></div>
</div>

<div class="a0004"><?php echo post_custom('shoukai'); ?></div>

<div class="flex-row">
<div class="a0005">定休日</div>
<div class="a0006"><?php echo post_custom('holiday'); ?></div>
</div>
<div class="flex-row">
<div class="a0005">営業</div>
<div class="a0006"><?php echo post_custom('salestime'); ?></div>
</div>

</section>

</div>
<?php endif ?>
<?php do_action( 'entry_card_snippet_after', get_the_ID() ); ?>
<?php //PVエリアの表示
if (is_admin_index_pv_visible() && is_user_administrator() || apply_filters('public_page_entry_card_pv_visible', false)) {
cocoon_template_part('tmp/admin-pv');
} ?>
<div class="entry-card-meta card-meta e-card-meta">
<div class="entry-card-info e-card-info">
<?php
//更新日の取得
$update_time = get_update_time(get_site_date_format());
//投稿日の表示
if (is_entry_card_post_date_visible() || (is_entry_card_post_date_or_update_visible() && !$update_time && is_entry_card_post_update_visible())): ?>
<span class="post-date"><span class="fa fa-clock-o" aria-hidden="true"></span><span class="entry-date"><?php the_time(get_site_date_format()); ?></span></span>
<?php endif ?>
<?php //更新時の表示
if (is_entry_card_post_update_visible() && $update_time && (get_the_time('U') < get_update_time('U'))): ?>
<span class="post-update"><span class="fa fa-history" aria-hidden="true"></span><span class="entry-date"><?php echo $update_time; ?></span></span>
<?php endif ?>
<?php //投稿者の表示
if (is_entry_card_post_author_visible()): ?>
<span class="post-author">
<span class="post-author-image"><?php echo get_avatar( get_the_author_meta( 'ID' ), '16', null ); ?></span>
<span class="post-author-name"><?php echo get_the_author(); ?></span>
</span>
<?php endif ?>
<?php //コメント数の表示
$count = get_comments_number();
if(is_entry_card_post_comment_count_visible() && is_single_comment_visible() && apply_filters('entry_card_post_comment_count_visible', true, $count)): ?>
<span class="post-comment-count"><span class="fa fa-comment-o comment-icon" aria-hidden="true"></span><?php echo $count; ?></span>
<?php endif; ?>
</div>
<div class="entry-card-categorys e-card-categorys"><?php the_nolink_categories() ?></div>
</div>

<?php //タグ、カテゴリの表示 ?>
<?php if (get_the_tags()): ?>
<div class="entry-card-tags-ex" tabindex="0"><object><?php the_tag_links() ?></object></div>
<?php endif; ?>

</div><!-- /.entry-card-content -->
</article>
</a>

------------------------------------------


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3132
 

●回答

PCのChromeデベロッパーで確認できないので、実際どうなっているか分かりません。

ただ、子テーマstyle.cssにエラーがあり、余分に「}」があったりします。
先ずは、以下で子テーマstyle.cssをチェック、修正し、エラーをなくして下さい。


●注意
実物を確認しながら、対面で対応している訳ではありません。
提示頂いた情報が全てとなります。
この為、できれば、問題となる画面をキャプチャ願い添付して頂きたく。


   
わいひら reacted
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

画像の添付を失念しておりました。

添付はアンドロイドでの表示(問題なく表示されているケース)となります。
のちほど改めて、iPhone14での表示を貼り付けます。


   
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

chu-ya

ご返信ありがとうございます。
cssのエラーを確認の上、結果をご報告いたします!


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3132
 

●問題点

PCで表示した際、以下のページが開かれます。

https://shiraokamembers.com/wp-content/themes/cocoon-child-master/tmp/pc.php

その際、HTMLのチェックをすると</div>が閉じられていないようで、エラーとなります。
合わせ確認願います。


   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3132
 

●提案

entry-card.phpを独自に変更しており。
カスタムフィールド(coupon1、shop...)を、エントリーカードのスニペットの後ろに、追加しているだけかと思います。
わざわざ、テンプレートを修正する必要がありますか?

Cocoonにはアクションフックentry_card_snippet_afterがあり。
標準のスニペットの後に、任意の情報を追加できます。

これを用いれば十分かと思います。
以下に例を示します。

add_action('entry_card_snippet_after',function($post_ID) {
  echo '<div class="a0001">' . post_custom('coupon1') . '</div>';
:
追加情報
});


   
わいひら reacted
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

アイフォンでの表示画面を添付いたします。
なお、改めてアイフォンSEでの表示を確認してみたところ、添付同様に崩れておりました。


   
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

なお、ご指摘頂きましたstyle.cssのエラーはすべて修正をおこないました。


   
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

ご提案いただいたアクションフックについての知見がまったくなく、色々とwebで調べながらカスタマイズしていった結果となっており、、、ご指摘いただいたような必要のない対応をしてしまっているのかもしれません・・・。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3132
 

●原因

<?php echo get_the_snippet( get_the_content(''), get_entry_card_excerpt_max_length() ); //カスタマイズで指定した文字の長さだけ本文抜粋?>
<div class="a0001">
:

スニペット内に、カスタムフィールドを追加しています。

スニペットの行数(-webkit-line-clamp)の高さを超えた場合、hiddenとしています。
※4行以上の場合、三点リーダー表示としている。

この為、スニペット内のカスタムフィールド情報が、高さを超える為、途中で欠けてしまう。

https://github.com/xserver-inc/cocoon/blob/0255d09825f3a0ebbd0a96bd67dd4fefa368fd44/style.css#L131-L138


●対策

スニペット表示していないので、スニペットの中(CSSクラスentry-card-snippet)でなく、外にカスタムフィールドを出力して下さい。


●補足

私なら、テンプレートを変更せず、子のfuntions.phpに、以下を追加し対応します。
例では、カスタムフィールドを取得し、エントリーカードに追加します。

注意書きにもありますが、本フォーラムでは、独自にカスタマイズした、PHP、JavaScriptについての質問は受け付けていません。
今後、ご自身で解決できない場合、有償にて業者に依頼願います。

add_action('entry_card_snippet_after',function($post_ID) {
  $coupon1 = post_custom('coupon1');
  :
  echo <<<EOF
<div class="a0001">{$coupon1}</div>
<section>
  <div class="flex-row">
    <div class="a0002">{$shop}</div>
    <div class="a0003">{$address}</div>
    <div class="a0004">{$shoukai}</div>
  </div>
  <div class="flex-row">
    <div class="a0005">定休日</div>
    <div class="a0006">{$holiday}</div>
  </div>
  <div class="flex-row">
    <div class="a0005">営業</div>
    <div class="a0006">{$salestime}</div>
  </div>
</section>
EOF;
});

   
わいひら reacted
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

もろもろありがとうございました!
頂いた内容にて、修正対応してみます。

注意書きにもありますが、本フォーラムでは、独自にカスタマイズした、PHP、JavaScriptについての質問は受け付けていません。
今後、ご自身で解決できない場合、有償にて業者に依頼願います。

承知いたしました。大変失礼いたしました。
次回以降、このようなことのないように気を付けます。


   
(@yoshiyoshi0210)
Active Member Registered
結合: 2年前
投稿: 10
トピックスターター  

頂いた対策の通り、追加したソースをスニペットの外に出したところ、きちんと下まで掲出されるようになりました。本当にありがとうございました。解決済とさせていただきます!


   
わいひら reacted
共有:

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

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

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

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

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

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

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

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