ページ送りナビの複数箇所設置 | カスタマイズ相談 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ページ送りナビの複数箇所設置
 
Share:
Notifications

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


sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月13日 02:21  

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

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


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月13日 05:27  

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

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

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

 

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

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

 

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

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

 

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

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

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

This post was modified 2か月 前 by かうたっく

わいひら 件のいいね!
sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月13日 06:11  

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

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

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

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

(イメージ)

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月13日 13:03  

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

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

とあります。

https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b

 

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

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

 

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年2月13日 20:43  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
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');
  }
} 

sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月14日 00:47  

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

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

取り急ぎお礼まで。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月14日 00:50  

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

 

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

https://gyazo.com/3a39531fe7889de2a7dadeab1a451c1b

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月14日 00:50  

かぶった 🤣 🤣 😆 


sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月14日 05:33  

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

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

 


sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
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');
  }
}
This post was modified 2か月 前 by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月14日 11:57  
投稿者:: @sheepco

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

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

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月14日 12:02  
投稿者:: @sheepco

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

 

 

投稿者:: @sheepco

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

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

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

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

あぁぁ…。。。

 

***********

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

This post was modified 2か月 前 by かうたっく

sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月14日 15:16  

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

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

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

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


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 4535
かうたっく - Facebook
2020年2月14日 17:22  

そうでしたか。

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

 

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

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

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


わいひら 件のいいね!
sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月14日 19:20  

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年2月14日 22:30  
投稿者:: @sheepco

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

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

This post was modified 2か月 前 by わいひら

sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
2020年2月15日 02:01  

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

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


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年2月15日 20:38  

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

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


sheepco
 sheepco
(@sheepco)
ゲスト
参加: 2か月 前
投稿: 9
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}


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年2月16日 19:06  

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


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年6ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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