Q&A
問題のページを Webブラウザで表示して、関連する部分の HTML と CSS を質問に記載していただくことは可能でしょうか？
Webサイトの URL を公開しても問題ない場合は、URL の提示でも OK です。
ワードプレスのテーマを自作しています。
ドットインストールという動画サイトを見ながら作成していると、メニューの場所に
<?php wp_nav_menu(); ?>を入れれば、ワードプレスサイトのカスタマイズでカテゴリごとの記事一覧の表示であったり、カスタムurlを指定してリンクに飛べたりできるという説明があったのですが、
カスタマイズで入力した**「文字は表示される」が「リンクに飛ばない」**という現象が起きています。
また、同様にサイドバーに設置したウィジェットも同じ現象が起きていて、
カスタマイズからカレンダー等の表示をさせてたり、月ごとのアーカイブ等を表示させると、
**「リンクになっていそうな文字色の変化があるのに」も関わらず「リンクに飛ばない」**という現象が起きています。
phpで、個別に
<?php the_permalink(); ?> <?php the_category(','); ?>としている部分については通常通り反映されており、問題がありません。
リンクだけが正常に動作しない状況で、足りないコードなどないか試行錯誤、検索をしたのですが、全く判明しませんでした。
ご教授よろしくお願いします。
【functions.php】
php
1add_theme_support('menus'); 2 3register_sidebar( 4 array( 5 'before_widget' => '<div class="widget">', 6 'after_widget' => '</div>', 7 'before_title' => '<h3>', 8 'after_title' => '</h3>', 9 ) 10 );
【header.php】
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title><?php wp_title('|',true,'right'); bloginfo('name'); ?></title> 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> 7 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>"> 8 <?php wp_head(); ?> 9</head> 10<body> 11 <div class="container"> 12 <img src="<?php echo get_template_directory_uri();?>/img/background.jpg" class="bg-image"> 13 <div class="bg-mask"> 14 <div id="header" class="container"> 15 <h1><a href="<?php echo home_url('/'); ?>"><img src="<?php echo get_template_directory_uri();?>/img/header1.jpg" width="1140px" height="200px" alt="header-picture"></a></h1> 16 <!-- <div class="menu"> --> 17 <?php wp_nav_menu(); ?> 18 <!-- </div> --> 19 20 21 </div>
【index.php】
php
1<?php get_header(); ?> 2 <div id="eyecatch"> 3 <img src="<?php echo get_template_directory_uri();?>/img/top.jpg" width="auto" height="auto" alt="アイキャッチが表示されてません"> 4 </div> 5 <div id="main" class="container"> 6 <div id="posts"> 7 8 <?php 9 if (have_posts()) : 10 while (have_posts()) : 11 the_post();?> 12 13 14 <div class="post"> 15 <div class="post-header"> 16 <p class="meta"> 17 <time itemprop="datePublished"><?php echo get_the_date(); ?> </time> 18 </p> 19 <h2> 20 <a href="<?php the_permalink(); ?>"><?php the_title();?></a> 21 </h2> 22 <div class="cat"> 23 【<?php the_category(','); ?>】 24 </div> 25 </div> 26 <div class="post-content"> 27 <div class="post-image"> 28 29 <?php if(has_post_thumbnail()) :?> 30 <?php the_post_thumbnail(array(100,100));?> 31 <?php else: ?> 32 <img src="<?php echo get_template_directory_uri();?>/img/thumnail.jpg" width="800" height="auto" 33 <?php endif;?> 34 35 </div> 36 <div class="post-body"> 37 <?php the_excerpt(); ?> 38 </div> 39 </div> 40 41 </div> <!-- /post --> 42 43 </div> <!-- /posts --> 44 45 <?php 46 endwhile;?> 47 <!-- ページネーション --> 48 <?php if (function_exists("pagination")) { 49 pagination($additional_loop->max_num_pages); 50 } ?> 51 <!-- ページネーションここまで --> 52 <?php else: ?> 53 54 <p>記事はありません。</p> 55 56 <?php 57 endif; 58 ?> 59 60 61 62 63 </div> <!-- /main --> 64<div id="sidebar" <?php get_sidebar(); ?> </div> 65 66<?php get_footer(); ?>
【sidebar.php】
php
1<div id="sidebar"> 2 <?php dynamic_sidebar(); ?> 3</div> <!-- /sidebar --> 4
【footer.php】
php
1<div id="footer"> 2 <div class="footer-a"> 3 <ul> 4 <li><a href="">HOME</a></li> 5 <li><a href="">ABOUT</a></li> 6 <li><a href="">問い合わせ(INQUIRY)</a></li> 7 <li><a href="">PRIVACY POLICY</a></li> 8 <li><a href="">SITE MAP</a></li> 9 </ul> 10 <p>当サイトは、〜〜</p> 11 </div> 12</div> <!-- /footer--> 13</div> 14 <?php wp_footer(); ?> 15</body> 16</html>
【style.css】
CSS
1body { 2 font-size: 16px; 3 font-family: meiryo,'Hiragino Kaku Gothic ProN',sans-serif; 4 background-color: #EEEEEE; 5 6} 7 8.bg-image{ 9 10 width: 1140px; 11 height: 100%; 12 background-size: contain; 13 background-repeat: no-repeat; 14 background-attachment: fixed; 15 z-index: 1; 16 position: fixed; 17 opacity:0.2 ; 18 margin: 0 auto; 19} 20 21.bg-mask{ 22 height: 100%; 23 background: rgba(255,255,255,0.5); 24} 25 26a { 27 text-decoration: none; 28} 29 30p { 31 32 margin: 0px; 33 line-height: 2; 34} 35 36.container { 37 width: 1140px; 38 margin: 0 auto; 39 overflow: hidden; 40} 41 42/* header */ 43 44#header { 45 margin: 0 auto; 46 /* background-color: white; */ 47 48} 49 50#header img{ 51 position: relative; 52 z-index:3; 53 margin: 0 auto; 54} 55 56 .menu { 57 /* background: #f39800; */ 58 width: 1140px; 59 margin: 0 0 30px 0; 60 /* padding: 20px 0; */ 61 font-size: 17px; 62 list-style: none; 63 overflow: hidden; 64 height: 50px; 65 letter-spacing: 2px; 66 /* border: solid; */ 67 } 68 69 .menu > li { 70 background: black; 71 height: 50px; 72 float: left; 73 /* border-right: 1px solid black; 74 border-left: 1px solid black; */ 75 width: calc(100% / 6); 76 /* width: 100%; */ 77 text-align: center; 78 /* border: 1px solid; */ 79 position: relative; 80 } 81 82 .menu > a { 83 /* padding: 10px auto; */ 84 color: #fff; 85 display: block; 86 } 87 88 .btn { 89 /* border: 1px solid green; */ 90 border-radius: 5px; 91 background-color: black; 92 /* padding-top: 15px; */ 93 padding: 15px 15px 15px 15px; 94 margin-bottom: auto; 95 /* height: 2.2rem; */ 96 text-align: center; 97 color: white; 98 font-size: 100%; 99 /* width: calc(99% / 6); */ 100 z-index: 9998; 101 position: absolute; 102 top: 0px; 103 right: 10px; 104 bottom: 0px; 105 left: 10px; 106 } 107 108 .btn:hover{ 109 cursor: pointer; 110 background-color: rgba(140,140,140,0.6) 111 } 112 113 114 /* sidebar */ 115 116 #sidebar { 117 float: right; 118 width: 250px; 119 /* border: solid; */ 120 padding-left: 20px; 121 background-color: white; 122 } 123 124 .widget { 125 background-color: white; 126 margin-top: 25px; 127 margin-bottom: 25px; 128 } 129 130 .widget h3{ 131 font-weight: bold; 132 } 133 134 .widget li{ 135 line-height: 1.8; 136 }
元々のindex.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>サイト名</title> 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css"> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8</head> 9<body> 10 <div class="container"> 11 <img src="img/背景画像.jpg" class="bg-image"> 12 <div class="bg-mask"> 13 14 15 <div id="header" class="container"> 16 <!-- <h1><a href="" >サイト名</a></h1> --> 17 <img src="img/header画像.jpg" width="1140px" height="200px" alt="header-picture"> 18 <ul class="menu"> 19 <li><a href="" class="btn">１</a></li> 20 <li><a href="" class="btn">２</a></li> 21 <li><a href="" class="btn">３</a></li> 22 <li><a href="" class="btn">４</a></li> 23 <li><a href="" class="btn">５</a></li> 24 <li><a href="" class="btn">６</a></li> 25 <ul> 26 </div> 27 <div id="eyecatch"> 28 <img src="img/画像.jpg" width="auto" height="auto" alt="アイキャッチが表示されてません"> 29 </div> 30 <div id="main" class="container"> 31 <div id="posts"> 32 <div class="post"> 33 <div class="post-header"> 34 <p class="meta"> 35 <time itemprop="datePublished">2019.3.3</time> 36 </p> 37 <h2> 38 <a href="">title</a> 39 </h2> 40 <div class="cat"> 41 <a href="" rel="category tag">【カテゴリ】</a> 42 </div> 43 </div> 44 <div class="post-content"> 45 <div class="post-image"> 46 <img src="img/画像.jpg" width="800" height="auto" 47 alt="アイキャッチが表示されてません"> 48 </div> 49 <div class="post-body"> 50 <p>本文ほんぶん本文ほんぶん本文ほんぶん 51 本文ほんぶん本文ほんぶん本文ほんぶん本文ほんぶん 52 本文ほんぶん</p> 53 </div> 54 </div> 55 </div> <!-- /post --> 56 <div class="navigation"> 57 <div class="prev">⬅️Prev Page</div> 58 <div class="next">Next Page➡️</div> 59 </div> 60 </div> <!-- /posts --> 61 <div id="sidebar"> 62 <div class="widget"> 63 <h3>カテゴリ一覧</h3> 64 <ul> 65 <li><a href="">item</a></li> 66 <li><a href="">item</a></li> 67 <li><a href="">item</a></li> 68 </ul> 69 </div> 70 </div> <!-- /sidebar --> 71 </div> 72 73 <div id="footer"> 74 <div class="footer-a"> 75 <ul> 76 <li><a href="">HOME</a></li> 77 <li><a href="">ABOUT</a></li> 78 <li><a href="">問い合わせ(INQUIRY)</a></li> 79 <li><a href="">PRIVACY POLICY</a></li> 80 <li><a href="">SITE MAP</a></li> 81 </ul> 82 <p>当サイトは、〜〜</p> 83 </div> 84 </div> 85</div> 86</body> 87</html> 88
https://teratail.com/help/question-tips#questionTips3-3-1 を参考にして、コード部分は、 <code>ボタン等を使って、マークダウンで記載していだだけないでしょうか？
phpではなく実際に生成されたHTMLを提示することはできますか？
また、teratailでは質問やコードを見やすくする仕組みがあります。
```言語名
コード
```
のように書き、各コードの間には1行空白行を入れてください。
パソコンからの投稿・編集の場合右側にプレビューが出ていると思いますので、確認しながら編集してください。
回答1件
0
直接の解決につながるかわかりませんが、
index.phpの最後の方
<div id="sidebar" <?php get_sidebar(); ?> </div>
↓
<div id="sidebar"> <?php get_sidebar(); ?> </div>
こうでしょうか？>が足りないかと。
それと、
sidebar.phpでもid="sidebar"があるので重複してます。
直らないかもしれないけどもうひとつ気づいた部分とこう直した方がいいのではという内容
index.php
html
1 <?php if(has_post_thumbnail()) :?> 2 <?php the_post_thumbnail(array(100,100));?> 3 <?php else: ?> 4 <img src="<?php echo get_template_directory_uri();?>/img/thumnail.jpg" width="800" height="auto"><!-- ←ここも>が足りない --> 5 <?php endif;?> 6 7（中略） 8 9 </div> <!-- /main --> 10<?php get_sidebar(); ?> <!-- 前後のdivを削除/sidebar.phpはそのまま --> 11 12<?php get_footer(); ?>
投稿2019/04/02 06:34
編集2019/04/02 07:47総合スコア3235
あなたの回答
tips
プレビュー
