🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
WordPress

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

PHP

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1236閲覧

投稿記事をget_permalink()で囲みたい

konno0928

総合スコア3

WordPress

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

PHP

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

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/02/05 01:22

前提・実現したいこと

wordpressの固定ページに投稿記事をカードで作成し、そのカード(投稿記事)をget_permalink()をで囲みたいです
投稿記事が1ページに10個表示するようにしたいために、Phpのループを使用しています。vscodeではaタグで囲まれているようになっているのですが、検証ツールで確認すると記事のthumbnailの画像までしか囲まれていない。
aタグが表示される場所の場所が、エディター上と違う場所に入っている
ループに関しての知識があまり何ので、アドバイスいただけたら嬉しいです!

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

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

・Phpのループ内のaタグ(get_permalink())が表示される場所が、エディター上と検証ツールで違う場所に入っている ・投稿記事をget_permalink()で囲めない

該当のソースコード

HTML

1<?php 2 3/** 4 * Template Name: トップページ 5 * @package WordPress 6 * @Template Post Type: post, page, 7 * @subpackage I'LL 8 * @since I'LL 1.0 9 */ 10get_header(); ?> 11<section class="stection__mv"> 12 <h1 class="stection__mv__title"> 13 パンダブログ 14 </h1> 15</section> 16<section class="news-content flex content inner"> 17 <article class="news-content__main flex"> 18 <div class="news-content__main__warp"> 19 <h2 class="news-content__title">新着情報</h2> 20 <div class="flex"> 21 <?php 22 $paged = (get_query_var('page')) ? get_query_var('page') : 1; 23 // 固定ページに特定のカテゴリーを表示 24 $args = array( 25 'post_type' => 'post', 26 'paged' => $paged, 27 'posts_per_page' => 10, /* 表示する記事数を入力 */ 28 'order' => 'DESC' //並び順の指定(降順) 29 ); 30 $the_query = new WP_Query($args); 31 if ($the_query->have_posts()) : 32 ?> 33 34 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 35 36 <a class="card" href="<?php echo get_permalink(); ?>"> 37 <div class="card-skin"> 38 <div class="card__imgframe"> 39 <?php if (has_post_thumbnail()) : ?> 40 <?php the_post_thumbnail('full'); ?> 41 <?php endif; ?> 42 </div> 43 <div class="card__textbox"> 44 <div class="card__overviewtext"> 45 <div class="flex"> 46 <?php the_tags('<ul><li class="tagcloud">', '</li><li class="tagcloud">', '</li></ul>'); ?> 47 <?php echo get_the_date(); ?> 48 </div> 49 </div> 50 <div class="card__titletext"> 51 <?php the_title(); ?> 52 </div> 53 </div> 54 </div> 55 </a> 56 57 <?php endwhile; ?> 58 <?php endif; ?> 59 </div> 60 </div> 61 62<?php wp_pagenavi(array('query' => $the_query)); ?> 63<?php wp_pagenavi(); ?> 64 65 </article> 66 <aside class="news-content__side-bar"> 67 <?php get_sidebar(); ?> 68 </aside> 69</section> 70 71 72<?php get_footer(); ?>

試したこと

・the_post_thumbnailを消した→テキスト部分は囲まれなかった
・aタグにポジションを指定して無理やり上に重ねようとした
・thumbnail部分とタイトル部分に分けてaタグで囲もうとした

↑解決できず
ループの設定か、endifの場所に問題があるのかもしれませんが分かりませんでした

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

wrodpress vscode
ここにより詳細な情報を記載してください。
参考画像です
[イメージ説明][イメージ説明]

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

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

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

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

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

miyabi_takatsuk

2021/02/05 01:45

検証ではなく、ソースを表示の方のソースコードを載せてください。 おそらく、閉じタグの不備が発生しているはずです。
konno0928

2021/02/05 05:34

回答ありがとうございます! 情報開示に至らぬ点があり申し訳ありません。現在解決しましたので、今回のご意見は次にいかさせていただきます。ありがとうございました。
guest

回答2

0

ベストアンサー

a要素の中にa要素を入れることはHTMLの文法上不可能なので、ブラウザが無理やり解釈している状態です。
a要素を出力している the_tags の使用をやめて、get_the_tags とかで出力するHTMLを組みましょう。

【the_tags – WordPress私的マニュアル】
https://elearn.jp/wpman/function/the_tags.html

現在の投稿データに設定されているタグ(リンク付き)をすべて表示する。

【get_the_tags – WordPress私的マニュアル】
https://elearn.jp/wpman/function/get_the_tags.html

投稿2021/02/05 03:43

kei344

総合スコア69596

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

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

konno0928

2021/02/05 05:32

なるほど理由と解決策までご提示していただきありがとうございます! 本当に助かりました
guest

0

多分犯人はthe_tags
aタグは入れ子にできません

ブロック全体ではなく
タイトル・サムネール画像のみを
リンクにするとかしましょう

投稿2021/02/05 03:38

編集2021/02/05 03:39
KazuhiroHatano

総合スコア7819

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問