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

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

ページ送りナビの複数箇所設置
 
共有:
通知
すべてクリア

[解決済] ページ送りナビの複数箇所設置

21 投稿
3 ユーザー
7 Reactions
4,991 表示
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

はじめまして。カスタマイズの自由さに惹かれてcocoonへ移行しようと、Flywheelでいろいろと試しているところです。

ページ送りナビについては設置場所が複数の選択肢から選べるようになっていますが、長いテキストを掲載するサイトを運営しておりできれば記事の上下2ヶ所にナビを設置できればと考えておりますが、可能でしょうか? それとも機能要望にあげたほうが良い内容でしょうか……。


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

長いテキストを掲載するサイトを運営

このようにありますけど、ページ送りナビを付けるだけでなく、タイトルまで付けたい。ってことですか?

どこを読んでても自由にユーザーが前後のページへ移動でき
タイトルなしでOKあれば、phpを触らずとも可能だと思います。
※モバイルの設定による

 

それ以外であればphpの編集が必要かも。

Cocoonの機能に依存しないのであれば、ウィジェットを使うのも良いと思います。ただウィジェットにphpを使えるプラグインが必須になると思います。

 

  • phpのカスタマイズは業者へ。って感じの案内になっちゃいます。

ただ場合によってフォーラムでなく、記事として紹介されることがチョクチョクある気もします。

 

機能要望にあげたほうが良い内容でしょうか

すでに上がったトピックが重複してしまうとマルチポストになります。

今後わいひらさんが要望に変更するしないかを決めてくれるので、特に気にする必要はなく、成り行きに任せるのが良いと思いますよ❦

この投稿は5年前ずつかうたっくに変更されました

   
わいひら reacted
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

説明がわかりづらく申し訳ありません。

希望するのはこちら↓です。

>どこを読んでても自由にユーザーが前後のページへ移動でき
>タイトルなしでOKあれば、phpを触らずとも可能だと思います。
>※モバイルの設定による

モバイル環境だと記事の上部にページ送りナビをつければ、画面のどこにいても「最上部に戻る」を使えば前後ページに遷移できると思うのですが、PCでも似たようなことができないかなと。

(イメージ)

←前のページ     次のページ→

本文 本文 本文 本文 本文 本文

←前のページ     次のページ→


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

モバイル環境だと記事の上部にページ送りナビをつければ、画面のどこにいても「最上部に戻る」を使えば前後ページに遷移できると思うのですが、PCでも似たようなことができないかなと。

であれば、以下のメニューにも 前・次のページ

とあります。

https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b

 

#prev 前へ 現在表示中の投稿ページの前のページを表示
#next 次へ 現在表示中の投稿ページの次のページを表示

https://wp-cocoon.com/mobile-footer-menu/

 

PCでもモバイルフッターのメニューを表示することは可能です。CSSでdisplay:noneになっているのをflexに変更すれば可能なのでおためしください。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 

モバイルで行うのであれば、かうたっくさんが書かれた方法が最も手っ取り早いかもしれません。

ページ送りナビについては設置場所が複数の選択肢から選べるようになっていますが、長いテキストを掲載するサイトを運営しておりできれば記事の上下2ヶ所にナビを設置できればと考えておりますが、可能でしょうか? それとも機能要望にあげたほうが良い内容でしょうか……。

これは個人的な考えではありますが、機能化するまで需要のある機能とはちょっと思えなかったです(もちろん今後の経験や、いろいろなご意見によって変わる可能性もあります)。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 

←前のページ     次のページ→

本文 本文 本文 本文 本文 本文

←前のページ     次のページ→

これに関しては、その部分にアクションフックがあっても便利かと思い、フックを追加しました。
まずは以下でアップデートしてください。
------------------------------------------------
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');
  }
} 

   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

かうたっくさん、わいひらさん、ありがとうございます。

わいひらさんが2つ目のレスで作ってくださったのが、まさにやりたかったことです……! さっそく試してみたところうまく反映しませんが、FTPでのアップロードが久しぶりで上書きエラーの出たファイルもあったのでそのせいなのかもしれません。再度試して、うまくいったらまた報告させていただきます。

取り急ぎお礼まで。


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

本来したい事ができるので良かったですね^^

 

でも以下の機能はCSSでPCビューは非表示になってるだけなので

https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b

CSSで表示することもイケるて、その機能も使えるかと思います。たぶん❦


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

かぶった ? ? ? 


   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

かうたっくさんの教えてくださった機能も、是非挑戦してみたいと思います!

なぜか反映されなかったアップデートファイル、新しいデータベースを作成して試してみたところ上下に表示されました……が、今度はなぜか本文下のページ送りナビが2つ表示されてしまいます……。

 


   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

何度もすみません。わからないなりに重複原因になりそうな部分を削除してみたところ、一応うまく表示されています(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');
  }
}

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

かうたっくさんの教えてくださった機能も、是非挑戦してみたいと思います!

万が一でもやる気があれば、挑戦してください

 


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

なぜか反映されなかったアップデートファイル、新しいデータベースを作成して試してみたところ上下に表示されました……が、今度はなぜか本文下のページ送りナビが2つ表示されてしまいます……。

 

 

投稿者:: @sheepco

長いテキストを掲載するサイトを運営しておりできれば

ってか、なんで ご自身が運営している風な事を書いてるのに

運営サイトのデータベースを適応してないの??? ? 

なんだか隠し事をしている感が否めないのが個人的に好きではないので、不特定多数の人が見ればそう感じる人もいるかも。それほど見てないと思いますけど。個人的にそう感じざる得ない感満載

あぁぁ…。。。

 

***********

だから何。ですが。だから、あぁぁ…って思ってかかわらないほうが良かったって、やっぱ思った。ただそれだけ ? ? ? 

この投稿は5年前ずつかうたっくに変更されました

   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

もしかしたら「運営」という言葉の使い方がまずかったでしょうか。

特に隠しごとをしているつもりはなく、当方はレンタルサーバーを借りてWordPress上に趣味の小説を書いており(現在別テーマを使用)、今後cocoonを利用したリニューアルをする際に、連載小説本文の上下どちらからでもページ遷移できるようにしたかったのです。

ウェブ制作素人&こちらでの質問も初めてだったため、用語が正しく使えていなかった/失礼なレスがあったかもしれません。(「運営サイトのデータベースを適用」の意味がわからないくらい素人です)せっかく親切にアドバイスをいただいたのに、残念な気持ちにさせてしまってすみません・・・。

※希望のレイアウトは達成できたので「解決済み」をマークさせていただきました。改めてありがとうございました。


   
わいひら reacted
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

そうでしたか。

ごめんなさい。ホントに失礼しました。

 

フォーラムをずっと見てきたんですが、なぜか疑心暗鬼で見る目が出てきてしまって。

コソコソとヤラシイ感じはなく、純粋に知りたい・やりたいと思ってのことだったのですね。

ほんとに申し訳ないです。ごめんなさい。


   
わいひら reacted
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

いえ、こちらが最初からカスタマイズを希望するページのURLを貼るという推奨ルールを守っていれば誤解も生じなかったと反省しています。

かうたっくさんがフォーラムの他の質問に回答された内容も参考にさせていただいており感謝しかありませんので、謝っていただく必要はないです。ありがとうございました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 
投稿者:: @sheepco

(functiona.phpへの追加PHPコードを以下のように改変)。問題ないでしょうか。

僕としては、singular_entry_content_before(本文上)しか利用していないのに、何故本文下に表示されているのが謎です。
とりあえず、うまく表示されているのであれば、それで良いのですが。
他のPHPへカスタマイズは何もしていないんですよね?


   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

わいひらさん、レスありがとうございます。他の機能も活用してこれまでWordPressではできないと思っていたことがいろいろと実現できそうで、楽しくカスタマイズしています。(連載小説を掲載するにあたっては「カテゴリ限定でのページ送り」が最高に嬉しいです)

コードの件ですが、ご参考になるかもしれませんので、現在の子テーマのfunction.phpのスクリーンショットを貼りますね。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 

見たところ、functions.phpは今回のカスタマイズしかしていないようなので、関係ないように思います。

その他のテンプレートファイルはカスタマイズしていないんですよね?
とりあえず、方法はさておき目的の表示になっているのであれば、それで良いと思います。


   
(@sheepco)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

他はスタイルシートにいくらかカスタマイズ用のコードを書き込んでいますので、参考までに内容を下に貼ります(でも目的は果たせていますし、あまりわいひらさんを煩わせるのも恐縮ですのであくまで参考で。レスしていただかなくても大丈夫です)。

これらの部分以外のカスタマイズはゼロです。

 

・テーマエディター内

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*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
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17372
 

スタイルは何を書いてあっても問題ないと思います。
意図通りの表示であれば、問題ないです。ありがとうございます。


   
共有:

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

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

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

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

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

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

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

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