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

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

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

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

PHP

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

Q&A

解決済

1回答

748閲覧

ワードプレス カテゴリの一覧ページにリンクさせる書き方について

konoha0708

総合スコア36

WordPress

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

PHP

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

0グッド

0クリップ

投稿2019/01/28 04:47

編集2019/01/30 04:06

サンプルサイト

上記サンプルの「もっと見る」のボタンをクリックしたときに、該当するカテゴリの一覧ページ(カテゴリ1だったらhttp://iq-cre.com/hikari/category/cate-1/)にリンクさせたいのですがどのようにすればよいでしょうか。

<a href="<?php echo get_category_link('');?>">もっと見る</a>

このようにしていますが、IDなどを指定していないのでリンクしません。
自動的に該当のIDを引っ張ってくる書き方を教えてください。

php

1<?php get_header(); 2$featcat1 = get_theme_mod('side_feat_cat1'); 3$featcat2 = get_theme_mod('side_feat_cat2'); 4$featcat3 = get_theme_mod('side_feat_cat3'); 5$featcat4 = get_theme_mod('side_feat_cat4'); 6$featcat5 = get_theme_mod('side_feat_cat5'); 7$featcat6 = get_theme_mod('side_feat_cat6'); 8$featcat7 = get_theme_mod('side_feat_cat7'); 9$featcat8 = get_theme_mod('side_feat_cat8'); 10$featcat9 = get_theme_mod('side_feat_cat9'); 11$featcat10 = get_theme_mod('side_feat_cat10'); 12?> 13 14 15<?php do_action( 'bp_before_content' ); ?> 16 17<!-- CONTENT START --> 18<div class="content"> 19<div class="content-inner"> 20 21 <!--タブ切り替え追加--> 22<ul class="tab-1" id="tab-t"> 23 <li class="hvr-sweep-to-top kaisen-1 select"><a href="#tab1"><?php echo get_cat_name(192); ?></a></li> 24 <li class="hvr-sweep-to-top kaisen-2"><a href="#tab2"><?php echo get_cat_name(193); ?></a></li> 25 <li class="hvr-sweep-to-top kaisen-3"><a href="#tab3"><?php echo get_cat_name(194); ?></a></li> 26 <li class="hvr-sweep-to-top kaisen-4"><a href="#tab4"><?php echo get_cat_name(195); ?></a></li> 27 <li class="hvr-sweep-to-top kaisen-5"><a href="#tab5"><?php echo get_cat_name(196); ?></a></li> 28 <li class="hvr-sweep-to-top kaisen-6"><a href="#tab6"><?php echo get_cat_name(197); ?></a></li> 29</ul> 30<div class="tab_content"> 31 <div class="tab_area content_wrap" id="tab1"> 32 <ul class="tab-item-set"> 33 <?php cat_post_list( 10, 192 ); ?> 34 </ul> 35 <div class="top-img-f-r"> 36 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 192 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> 37 </a> 38 </div> 39 </div> 40 <div class="tab_area content_wrap disnon" id="tab2"> 41 <ul class="tab-item-set"> 42 <?php cat_post_list( 10, 193 ); ?> 43 </ul> 44 <div class="top-img-f-r"> 45 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 193 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 46 </div> 47 </div> 48 <div class="tab_area content_wrap disnon" id="tab3"> 49 <ul class="tab-item-set"> 50 <?php cat_post_list( 10, 194 ); ?> 51 </ul> 52 <div class="top-img-f-r"> 53 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 194 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 54 </div> 55 </div> 56 <div class="tab_area content_wrap disnon" id="tab4"> 57 <ul class="tab-item-set"> 58 <?php cat_post_list( 10, 195 ); ?> 59 </ul> 60 <div class="top-img-f-r"> 61 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 195 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 62 </div> 63 </div> 64 <div class="tab_area content_wrap disnon" id="tab5"> 65 <ul class="tab-item-set"> 66 <?php cat_post_list( 10, 196 ); ?> 67 </ul> 68 <div class="top-img-f-r"> 69 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 196 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 70 </div> 71 </div> 72 <div class="tab_area content_wrap disnon" id="tab6"> 73 <ul class="tab-item-set"> 74 <?php cat_post_list( 10, 197 ); ?> 75 </ul> 76 <div class="top-img-f-r"> 77 <a class="tab-pickup-photo__link"><?php echo my_get_cat_thumbnail_163483( 197 ,'thumbnail', array( 'class' => 'tab-pickup-photo__img' ) ); ?> </a> 78 </div> 79 </div> 80</div> 81 82<div class="btn__more"> 83 <a href="<?php echo get_category_link('');?>">もっと見る</a> 84</div>
// カテゴリ別新着 function cat_post_list( $show_num, $cat_id ) { global $post; $args = array( 'posts_per_page' => $show_num, 'cat' => $cat_id ); $myposts = get_posts( $args ); foreach( $myposts as $post ) { setup_postdata($post); ?> <li> <a href="<?php the_permalink(); ?>" class="cate-title"> <?php the_title(); ?></a> </li> <?php } wp_reset_postdata(); } ?>

追記↓

<script type="text/javascript"> (function($) { $(document).ready(function() { $('.tab_area:first').show(); $('.tab-1 li:first').addClass('active'); $('.tab-1 li').click(function() { $('.tab-1 li').removeClass('active'); $(this).addClass('active'); $('.tab_area').hide(); $(jQuery(this).find('a').attr('href')).fadeIn(); return false; }); }); })(jQuery); </script>

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

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

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

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

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

tabuu

2019/01/28 06:22

>自動的に該当のIDを引っ張ってくる書き方を教えてください。 該当とはどのような条件で判定できるのでしょうか?
konoha0708

2019/01/28 07:11 編集

すみません。本文に追記します。 各カテゴリの一覧(archive.php)にリンクさせたいのですが、情報足りますでしょうか?
退会済みユーザー

退会済みユーザー

2019/01/28 07:11

タブ表示にJavaScriptを使っていますか? またはCSSで実現しているのでしょうか?
konoha0708

2019/01/29 11:05

タブ表示は下記サイトを参照してCSS、jQueryで実装しています。 https://ateitexe.com/wordpress-category-newpost-tab/ 初心者でして、コピペで動かしている状況です。 勉強不足で申し訳ありませんが、回答を具体的なコードで教えていただけると助かります。 よろしくお願いします。
退会済みユーザー

退会済みユーザー

2019/01/29 11:29

konoha0708さん > タブ表示は下記サイトを参照してCSS、jQueryで実装しています。 『参照』したのであれば、実装したコードと元になったコードとの間で相違点があるのではないでしょうか。参照して実際に実装した結果のソースコードを質問文に記載していただけますか?
konoha0708

2019/01/30 04:07

script部分を追記しました。 よろしくお願いします。
guest

回答1

0

ベストアンサー

サンプルサイトを見てやっと把握できたのですが、ナビゲーションを切り替えたときに
選択したナビゲーションのカテゴリへリンクを貼りたいということですね。

2種類思いつきました。
(1)もっと見るリンクをナビゲーションの数だけ用意しておいて表示をオン・オフする。
(2)ナビゲーションにカテゴリIDを付与して、切り替えたときにもっと見るのリンク先も書き換える。

(1)の方が簡単そうです。

投稿2019/01/28 07:18

tabuu

総合スコア2449

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

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

konoha0708

2019/01/29 11:33

やり方のご提案をいただきありがとうございます。 伝えたいことがわかりにくくてすみません。 (1)の具体的なやり方をご指導いただけるとありがたいです。
tabuu

2019/01/29 23:44

「もっと見る」をtab1からtab6のそれぞれのdivの中に配置して、 get_category_linkの引数はカテゴリのidを設定します。
konoha0708

2019/01/30 04:08

お返事ありがとうございます。 やってみます。
konoha0708

2019/01/30 04:17

理想通りの動作でできました! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問