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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

0回答

331閲覧

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

hiraka

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/07/09 03:30

前提・実現したいこと

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

ワードプレスの最新記事から順に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/ツールのバージョンなど)

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問