サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018-05-06 01:20
別件での質問から気づいたのですが、ページネーションとマルチページ用のページャーに「空のテキストノード」が発生していて、数字の囲み同士の余白が通常より広い見映えになってしまっています。といっても半角なので、わずかです。たぶん誰も気にしないレベルかとは思います。
自分の設定はhtmlソースの圧縮をしていないので、最初は気にしていませんでしたが、わいひらさんのサイトを見て、おや？と思い、ソースを見たら、半角が追加されていることがわかりました。
そしてマルチページ用のページャーはわいひらさんと見映えが同じだったため、確認したところ、圧縮をしても余白が消えていない状態でした。
ご確認いただけるとのことでしたので、新トピとして書かせていただきますね！
詳細をもう少し具体的に書きます。
■ページネーションの場合
通常だと半角が空きますが、圧縮をすると半角がなくなります。
コクーントップは、圧縮されていて、半角が入っていません。
ソースが圧縮されていない場合、半角空きます。
例えば今不具合質問をされている方のサイトとか。画像を添付します。
■マルチページ用のページャーの場合
ソースを圧縮した状態でも、残念ながら半角がはいってしまっています。
https://wp-cocoon.com/layout/2/
<div class="pager-links"> <a href="https://wp-cocoon.com/layout/"><span class="page-numbers">1</span></a> <span class="page-numbers current">2</span> <a href="https://wp-cocoon.com/layout/3/"><span class="page-numbers">3</span></a> <a href="https://wp-cocoon.com/layout/4/"><span class="page-numbers">4</span></a>
圧縮されていて横並びなのに、半角が入った状態です。
出力の際に、改行せずこの部分だけズラズラと横にしていただくことで直らないだろうか？？と思ったりしていますが、どうでしょうか？
pager-page-links.phpとpagination.phpをじっと見ていますが、自分ではいまのところ修正が無理そうです。
ご確認いただけますでしょうか？
ちなみにブラウザはfirefoxの59.0.3で確認しています。
どうぞよろしくお願いいたします！
2018-05-06 22:14
空欄とは半角スペースのことだったんですね。ブランクのHTML要素か何かと思っていました。
出力の際に、改行せずこの部分だけズラズラと横にしていただくことで直らないだろうか？？と思ったりしていますが、どうでしょうか？
tmp/pager-page-links.phpにもあるように、ページャーの出力は、Wordpressの標準関数wp_link_pagesを利用して出力しています。
なので、その出力はWordpressデフォルトの出力のようです。
それを修正するには一旦、バッファリングの用いてテキストを取得し、文字列を置換等で処理したあと出力する必要があるようです。
https://blog.s-giken.net/249.html
Topic starter
2018-05-07 00:28
わいひらさん、お返事ありがとうございます。
出力自体のほうで制御はできないのですね。
これはワードプレスのほうの話ですかあ～。
ワードプレスって何かと気になる部分はあったりしますが、なるべく複雑なことをせず、なんとか簡単な方法で直せないか、ごまかせないか？ちょっと調べたところ、
今回の場合はinline-blockによるもので、この部分を工夫すればどうやら大丈夫そうです。
自己完結状態で恐縮ですが、作戦として、
■font-size:0とfont-size:18pxをいれる
paginationとpager-linksにfont-size:0を追加
page-numbersにfont-size:18pxを追加
これが一番簡単かも、でもハックっぽいおまじない系かも
■letter-spacing: -1em;とletter-spacing:normal;を追加
paginationとpager-linksにletter-spacing: -1em;を追加
page-numbersにletter-spacing:normal;を追加
こちらも簡単ですが、でもハックっぽいおまじない系かも
■page-numbersのdisplay: inline-block;をfloat:leftにする
何か参考サイトが無いか探したところ、stingerがpage-numbersをfloat:leftにしていました。
■ulとliのリストにする
リストスタイルの形にすればdisplay: inline-block;を使っても妙な余白の表示は現れないようです。Simplicityがリストスタイルで余白を無い状態にしています。寝ログはソースの圧縮をしていませんが、きちんとmargin-left: 3px;分しか空いていません。
こんな感じで直せそうです。どのパターンも子テーマでちょいちょいと対応できますので、この件大丈夫です！お忙しい中、ありがとうございます！
2018-05-07 01:03
wp_link_pages関数をよくよく見てみたら、引数の'separator' に対して半角ペースが入っているのが原因っぽいです。
'separator' を空文字にすることで解決出来るっぽいです。
それならば、アーカイブページとかのページネーション（こちらも余白が大きいので）のpaginate_links関数もあるのかと思ったら、こちらはない…。
やっぱり、いろいろと難しい。
2018-05-07 01:14
display: inline-flex;を使うことで、半角スペースとかがあってもスマートに解決出来るっぽいです。
https://github.com/yhira/cocoon/commit/9b8dda3ad109dfa35c65c3f8c60ca8ca6912e8a5#diff-57ee5de7808f9fc8ca656f02eb87c593
一応修正したものを、いかにアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip
Topic starter
2018-05-07 10:45
修正版確認いたしました。直りました！ありがとうございます。
wp_link_pages関数も確認しました。'separator' とはなるほどです。paginate_links関数のほうにはないとは、、残念です、うーーんですね。
display: inline-flex;に変更での解決は、一番スマートに着地した感じです。美しいですね。ありがとうございます。
調べるとinlin-blockをflexBoxに拡張したような性格があるようですね。地味にすごいみたいですねｗ
flexの活躍は多いですが、inline-flexはほとんど使用することがなかったので、今後使っていきたいと思います。勉強になります。
たぶんこんなわずかな半角部分など、誰も気にしないどうでもいいよレベルだと思いますが、お忙しい中、お付き合いくださりありがとうございました！解決ということで！
そろそろ安定版の匂いがしますね、引き続きよろしくお願いいたします！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。