サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年2月13日 02:21
はじめまして。カスタマイズの自由さに惹かれてcocoonへ移行しようと、Flywheelでいろいろと試しているところです。
ページ送りナビについては設置場所が複数の選択肢から選べるようになっていますが、長いテキストを掲載するサイトを運営しておりできれば記事の上下2ヶ所にナビを設置できればと考えておりますが、可能でしょうか? それとも機能要望にあげたほうが良い内容でしょうか……。
2020年2月13日 05:27
長いテキストを掲載するサイトを運営
このようにありますけど、ページ送りナビを付けるだけでなく、タイトルまで付けたい。ってことですか?
どこを読んでても自由にユーザーが前後のページへ移動でき
タイトルなしでOKあれば、phpを触らずとも可能だと思います。
※モバイルの設定による
それ以外であればphpの編集が必要かも。
Cocoonの機能に依存しないのであれば、ウィジェットを使うのも良いと思います。ただウィジェットにphpを使えるプラグインが必須になると思います。
- phpのカスタマイズは業者へ。って感じの案内になっちゃいます。
ただ場合によってフォーラムでなく、記事として紹介されることがチョクチョクある気もします。
機能要望にあげたほうが良い内容でしょうか
すでに上がったトピックが重複してしまうとマルチポストになります。
今後わいひらさんが要望に変更するしないかを決めてくれるので、特に気にする必要はなく、成り行きに任せるのが良いと思いますよ❦
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
2020年2月13日 06:11
説明がわかりづらく申し訳ありません。
希望するのはこちら↓です。
>どこを読んでても自由にユーザーが前後のページへ移動でき
>タイトルなしでOKあれば、phpを触らずとも可能だと思います。
>※モバイルの設定による
モバイル環境だと記事の上部にページ送りナビをつければ、画面のどこにいても「最上部に戻る」を使えば前後ページに遷移できると思うのですが、PCでも似たようなことができないかなと。
(イメージ)
←前のページ 次のページ→
本文 本文 本文 本文 本文 本文
←前のページ 次のページ→
2020年2月13日 13:03
モバイル環境だと記事の上部にページ送りナビをつければ、画面のどこにいても「最上部に戻る」を使えば前後ページに遷移できると思うのですが、PCでも似たようなことができないかなと。
であれば、以下のメニューにも 前・次のページ
とあります。
https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b
#prev 前へ 現在表示中の投稿ページの前のページを表示
#next 次へ 現在表示中の投稿ページの次のページを表示
https://wp-cocoon.com/mobile-footer-menu/
PCでもモバイルフッターのメニューを表示することは可能です。CSSでdisplay:noneになっているのをflexに変更すれば可能なのでおためしください。
わいひら reacted
2020年2月13日 20:43
モバイルで行うのであれば、かうたっくさんが書かれた方法が最も手っ取り早いかもしれません。
ページ送りナビについては設置場所が複数の選択肢から選べるようになっていますが、長いテキストを掲載するサイトを運営しておりできれば記事の上下2ヶ所にナビを設置できればと考えておりますが、可能でしょうか? それとも機能要望にあげたほうが良い内容でしょうか……。
これは個人的な考えではありますが、機能化するまで需要のある機能とはちょっと思えなかったです(もちろん今後の経験や、いろいろなご意見によって変わる可能性もあります)。
2020年2月13日 20:44
←前のページ 次のページ→
本文 本文 本文 本文 本文 本文
←前のページ 次のページ→
これに関しては、その部分にアクションフックがあっても便利かと思い、フックを追加しました。
まずは以下でアップデートしてください。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
その後、以下のPHPコードを子テーマのfunctions.phpに追記する形でコピペすれば実装できるかと思います。
//投稿本文前後に「ページ送りナビ」を設置する add_action('singular_entry_content_before', 'add_entry_content_pager_post_navi'); add_action('singular_entry_content_after', 'add_entry_content_pager_post_navi'); function add_entry_content_pager_post_navi(){ if (is_single()) { get_template_part('tmp/pager-post-navi'); } }
Topic starter
2020年2月14日 00:47
かうたっくさん、わいひらさん、ありがとうございます。
わいひらさんが2つ目のレスで作ってくださったのが、まさにやりたかったことです……! さっそく試してみたところうまく反映しませんが、FTPでのアップロードが久しぶりで上書きエラーの出たファイルもあったのでそのせいなのかもしれません。再度試して、うまくいったらまた報告させていただきます。
取り急ぎお礼まで。
2020年2月14日 00:50
本来したい事ができるので良かったですね^^
でも以下の機能はCSSでPCビューは非表示になってるだけなので
https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b
CSSで表示することもイケるて、その機能も使えるかと思います。たぶん❦
わいひら reacted
2020年2月14日 00:50
かぶった ? ? ?
Topic starter
2020年2月14日 05:38
何度もすみません。わからないなりに重複原因になりそうな部分を削除してみたところ、一応うまく表示されています(functiona.phpへの追加PHPコードを以下のように改変)。問題ないでしょうか。
//投稿本文前後に「ページ送りナビ」を設置する
add_action('singular_entry_content_before', 'add_entry_content_pager_post_navi');
function add_entry_content_pager_post_navi(){
if (is_single()) {
get_template_part('tmp/pager-post-navi');
}
}
2020年2月14日 11:57
かうたっくさんの教えてくださった機能も、是非挑戦してみたいと思います!
万が一でもやる気があれば、挑戦してください
2020年2月14日 12:02
なぜか反映されなかったアップデートファイル、新しいデータベースを作成して試してみたところ上下に表示されました……が、今度はなぜか本文下のページ送りナビが2つ表示されてしまいます……。
長いテキストを掲載するサイトを運営しておりできれば
ってか、なんで ご自身が運営している風な事を書いてるのに
運営サイトのデータベースを適応してないの??? ?
なんだか隠し事をしている感が否めないのが個人的に好きではないので、不特定多数の人が見ればそう感じる人もいるかも。それほど見てないと思いますけど。個人的にそう感じざる得ない感満載
あぁぁ…。。。
***********
だから何。ですが。だから、あぁぁ…って思ってかかわらないほうが良かったって、やっぱ思った。ただそれだけ ? ? ?
This post was modified 5年前 by かうたっく
Topic starter
2020年2月14日 15:16
もしかしたら「運営」という言葉の使い方がまずかったでしょうか。
特に隠しごとをしているつもりはなく、当方はレンタルサーバーを借りてWordPress上に趣味の小説を書いており(現在別テーマを使用)、今後cocoonを利用したリニューアルをする際に、連載小説本文の上下どちらからでもページ遷移できるようにしたかったのです。
ウェブ制作素人&こちらでの質問も初めてだったため、用語が正しく使えていなかった/失礼なレスがあったかもしれません。(「運営サイトのデータベースを適用」の意味がわからないくらい素人です)せっかく親切にアドバイスをいただいたのに、残念な気持ちにさせてしまってすみません・・・。
※希望のレイアウトは達成できたので「解決済み」をマークさせていただきました。改めてありがとうございました。
わいひら reacted
2020年2月14日 17:22
そうでしたか。
ごめんなさい。ホントに失礼しました。
フォーラムをずっと見てきたんですが、なぜか疑心暗鬼で見る目が出てきてしまって。
コソコソとヤラシイ感じはなく、純粋に知りたい・やりたいと思ってのことだったのですね。
ほんとに申し訳ないです。ごめんなさい。
わいひら reacted
Topic starter
2020年2月14日 19:20
いえ、こちらが最初からカスタマイズを希望するページのURLを貼るという推奨ルールを守っていれば誤解も生じなかったと反省しています。
かうたっくさんがフォーラムの他の質問に回答された内容も参考にさせていただいており感謝しかありませんので、謝っていただく必要はないです。ありがとうございました。
わいひら reacted
2020年2月14日 22:30
(functiona.phpへの追加PHPコードを以下のように改変)。問題ないでしょうか。
僕としては、singular_entry_content_before(本文上)しか利用していないのに、何故本文下に表示されているのが謎です。
とりあえず、うまく表示されているのであれば、それで良いのですが。
他のPHPへカスタマイズは何もしていないんですよね?
2020年2月15日 20:38
見たところ、functions.phpは今回のカスタマイズしかしていないようなので、関係ないように思います。
その他のテンプレートファイルはカスタマイズしていないんですよね?
とりあえず、方法はさておき目的の表示になっているのであれば、それで良いと思います。
Topic starter
2020年2月15日 23:37
他はスタイルシートにいくらかカスタマイズ用のコードを書き込んでいますので、参考までに内容を下に貼ります(でも目的は果たせていますし、あまりわいひらさんを煩わせるのも恐縮ですのであくまで参考で。レスしていただかなくても大丈夫です)。
これらの部分以外のカスタマイズはゼロです。
・テーマエディター内
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*PC用1カラム横幅*/
.no-sidebar .wrap {
width: 750px;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 30px;
padding-right: 30px;
}
/*480px以下*/
@media screen and (max-width: 480px){
.no-sidebar .wrap {
width: auto;
}
.breadcrumb.sbp-main-before,
.breadcrumb.sbp-footer-before,
.breadcrumb.pbp-main-before,
.breadcrumb.pbp-footer-before {
padding-left: 1em;
padding-right: 1em;
}
}/**エントリーカード日付表示**/
.new-entry-card-date {
display: block;
}/**アイコン画像余白**/
.site-name-text img {
margin-top: 5px;
margin-bottom: 0px;
}/**ヘッダー追従**/
.header-container {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1999;
}/**グローバルナビ選択時**/
.navi-in a:hover {
background-color: #640125;
}
・追加CSS
div.header-container-in.hlt-top-menu .logo-header img {
height: auto;
max-height: none;
width: 400px;
}#pager-post-navi .prev-post .prev-post-title{ font-size:12px;color:#000000}
#pager-post-navi .next-post .next-post-title{ font-size:12px;color:#000000}
わいひら reacted
2020年2月16日 19:06
スタイルは何を書いてあっても問題ないと思います。
意図通りの表示であれば、問題ないです。ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。