質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.93%

wordpressページ内リンクとカウントアップダウンを同時に行いたい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 119

hiraka

score 0

前提・実現したいこと

現在ワードプレスでサイト制作をしています。再現したい動作ができなくて困っています。お手数ですがお力をお借りしたいです。

ワードプレスの最新記事から順にidを取得して1~+1ずつ増えていく数値に名前を変えたリンクを作成しました。

ページネーションで「>」ボタンをクリックするとカウントアップします。
「<」をクリックでカウントダウンします。

最初の数値はカウントは1です。この数値にはwordpressの一番新しい記事のidのリンクが含まれています。

カウントアップダウンする動作と同時にカウントと同じ記事のIDをページ内リンクでその位置に飛びたい。

これを実現したいです。

例)カウントが1で「>」をクリックするとカウントが2になりidが2の記事に飛びます。id="2" == 最新から2番目の記事

id2の記事に飛んで別ページで表示したいわけではなくて、同じページ内に10~30記事をサムネイル画像をflexで並べていまして、カウントアップすると同時にそれぞれの記事につけた1,2,3と続くidに飛べるようにしたいです。

説明力がないので、動画を撮りました。
こちらをご覧くださいませ!https://www.youtube.com/watch?v=bWiGpH7KaAc

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージはないです。

該当のソースコード

PHP
ソースコード
$page_id = get_posts(array('post_type' => 'post','posts_per_page' => -1,'fields' => 'ids',));
$page_id_num = count($page_id);
for( $i=0; $i < $page_id_num; $i++) {
echo '<a href="#'.$page_id[$i].'">';
echo $i+1;
echo '</a><br>';
}

まずはPHPで最新記事から順にidを取得してfor文で1~+1ずつされるリンクを作成しました。
このリンクをクリックすると、それぞれの記事のところに飛べるので成功です。

<span id="btn10"><?php echo $i+1; ?></span>
ここで現在のカウントを表示しています。

<button id="btn" class="prev" onclick="myFunction()"> < </button>
<button id="btn" class="next" onclick="myFunction1()"> > </button>
このボタンでカウントアップしています。

Javascript
//count
function myFunction1() {
if( count < max ){
count += 1;
document.getElementById("btn10").innerHTML = count;
}else if( count == max){
count = 1;
document.getElementById("btn10").innerHTML = count;
}
}
function myFunction() {
if (count > min ) {
count -= 1;
document.getElementById("btn10").innerHTML = count;
}else if( count == min){
count = max;
document.getElementById("btn10").innerHTML = count;
}
}
button onClickでカウントアップ、ダウンをする関数を実行します。これでカウントアップダウンは実行できているので成功です。

ここまでで、記事ごとにidを取得してそこに飛べるリンクを作成できました。
ボタンクリックでカウントアップダウンできるようにもなりました。

あとはカウントが切り替わったと同時に、このカウント値とidに飛べる番号が一致したらそのidのリンクに飛びたいです。

それぞれの動作は実現できているのですが、これらを合体させたいです。
クリックでカウント、1==一番新しい記事、2==2番目に新しい記事
これを実現したいのですが、可能でしょうか?

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る