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

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

ただいまの
回答率

88.04%

【ワードプレス】wp_nav_menuやwidgetで表示させた部分だけリンクが反映されない

受付中

回答 1

投稿 編集

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

score 10

ワードプレスのテーマを自作しています。

ドットインストールという動画サイトを見ながら作成していると、メニューの場所に

<?php wp_nav_menu(); ?>

を入れれば、ワードプレスサイトのカスタマイズでカテゴリごとの記事一覧の表示であったり、カスタムurlを指定してリンクに飛べたりできるという説明があったのですが、

カスタマイズで入力した「文字は表示される」が「リンクに飛ばない」という現象が起きています。

また、同様にサイドバーに設置したウィジェットも同じ現象が起きていて、

カスタマイズからカレンダー等の表示をさせてたり、月ごとのアーカイブ等を表示させると、

「リンクになっていそうな文字色の変化があるのに」も関わらず「リンクに飛ばない」という現象が起きています。

phpで、個別に

<?php the_permalink(); ?>

<?php the_category(','); ?>

としている部分については通常通り反映されており、問題がありません。

リンクだけが正常に動作しない状況で、足りないコードなどないか試行錯誤、検索をしたのですが、全く判明しませんでした。

ご教授よろしくお願いします。

【functions.php】

add_theme_support('menus');

register_sidebar(
    array(
      'before_widget' => '<div class="widget">',
      'after_widget' => '</div>',
      'before_title' => '<h3>',
      'after_title' => '</h3>',
    )
  );

【header.php】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title><?php wp_title('|',true,'right'); bloginfo('name'); ?></title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
  <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>
<body>
    <div class="container">
      <img src="<?php echo get_template_directory_uri();?>/img/background.jpg" class="bg-image">
      <div class="bg-mask">
          <div id="header" class="container">
          <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>
          <!-- <div class="menu"> -->
            <?php wp_nav_menu(); ?>
          <!-- </div> -->


          </div>

【index.php】

<?php get_header(); ?>
    <div id="eyecatch">
      <img src="<?php echo get_template_directory_uri();?>/img/top.jpg" width="auto" height="auto" alt="アイキャッチが表示されてません">
    </div>
    <div id="main" class="container">
      <div id="posts">

        <?php
        if (have_posts()) :
          while (have_posts()) :
            the_post();?>


        <div class="post">
          <div class="post-header">
            <p class="meta">
              <time itemprop="datePublished"><?php echo get_the_date(); ?> </time>
            </p>
            <h2>
              <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
            </h2>
            <div class="cat"><?php the_category(','); ?></div>
          </div>
          <div class="post-content">
            <div class="post-image">

              <?php if(has_post_thumbnail()) :?>
              <?php the_post_thumbnail(array(100,100));?>
              <?php else: ?>
                <img src="<?php echo get_template_directory_uri();?>/img/thumnail.jpg" width="800" height="auto"
              <?php endif;?>

            </div>
            <div class="post-body">
              <?php the_excerpt(); ?>
            </div>
          </div>

        </div> <!-- /post -->

      </div> <!-- /posts -->

      <?php
    endwhile;?>
      <!-- ページネーション -->
      <?php if (function_exists("pagination")) {
      pagination($additional_loop->max_num_pages);
  } ?>
      <!-- ページネーションここまで -->
    <?php  else:  ?>

      <p>記事はありません。</p>

      <?php
          endif;
      ?>




    </div> <!-- /main -->
<div id="sidebar" <?php get_sidebar(); ?> </div>

<?php get_footer(); ?>

【sidebar.php】

<div id="sidebar">
  <?php dynamic_sidebar(); ?>
</div> <!-- /sidebar -->


【footer.php】

<div id="footer">
  <div class="footer-a">
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">問い合わせ(INQUIRY)</a></li>
      <li><a href="">PRIVACY POLICY</a></li>
      <li><a href="">SITE MAP</a></li>
    </ul>
    <p>当サイトは、〜〜</p>
  </div>
</div> <!-- /footer-->
</div>
  <?php wp_footer(); ?>
</body>
</html>

【style.css】

body {
  font-size: 16px;
  font-family: meiryo,'Hiragino Kaku Gothic ProN',sans-serif;
  background-color: #EEEEEE;

}

.bg-image{

    width: 1140px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 1;
    position: fixed;
    opacity:0.2 ;
    margin: 0 auto;
}

.bg-mask{
  height: 100%;
  background: rgba(255,255,255,0.5);
}

a {
  text-decoration: none;
}

p {

  margin: 0px;
  line-height: 2;
}

.container {
  width: 1140px;
  margin: 0 auto;
  overflow: hidden;
}

/* header */

#header {
  margin: 0 auto;
  /* background-color: white; */

}

#header img{
  position: relative;
  z-index:3;
  margin: 0 auto;
}

  .menu {
      /* background: #f39800; */
      width: 1140px;
      margin: 0 0 30px 0;
      /* padding: 20px 0; */
      font-size: 17px;
      list-style: none;
      overflow: hidden;
      height: 50px;
      letter-spacing: 2px;
      /* border: solid; */
  }

   .menu > li {
     background: black;
     height: 50px;
      float: left;
      /* border-right: 1px solid black;
      border-left: 1px solid black; */
      width: calc(100% / 6);
      /* width: 100%; */
      text-align: center;
      /* border: 1px solid; */
      position: relative;
   }

   .menu > a {
      /* padding: 10px auto; */
      color: #fff;
      display: block;
   }

   .btn {
      /* border: 1px solid green; */
      border-radius: 5px;
      background-color: black;
      /* padding-top: 15px; */
      padding: 15px 15px 15px 15px;
      margin-bottom: auto;
      /* height: 2.2rem; */
      text-align: center;
      color: white;
      font-size: 100%;
      /* width: calc(99% / 6); */
      z-index: 9998;
      position: absolute;
      top: 0px;
      right: 10px;
      bottom: 0px;
      left: 10px;
      }

    .btn:hover{
      cursor: pointer;
      background-color: rgba(140,140,140,0.6)
    }


  /* sidebar */

  #sidebar {
      float: right;
      width: 250px;
      /* border: solid; */
      padding-left: 20px;
      background-color: white;
  }

    .widget {
      background-color: white;
      margin-top: 25px;
      margin-bottom: 25px;
    }

    .widget h3{
        font-weight: bold;
    }

    .widget li{
        line-height: 1.8;
    }

元々のindex.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サイト名</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
      <img src="img/背景画像.jpg" class="bg-image">
      <div class="bg-mask">


    <div id="header" class="container">
      <!-- <h1><a href="" >サイト名</a></h1> -->
      <img src="img/header画像.jpg" width="1140px" height="200px" alt="header-picture">
      <ul class="menu">
        <li><a href="" class="btn"></a></li>
        <li><a href="" class="btn"></a></li>
        <li><a href="" class="btn"></a></li>
        <li><a href="" class="btn"></a></li>
        <li><a href="" class="btn"></a></li>
        <li><a href="" class="btn"></a></li>
        <ul>
    </div>
    <div id="eyecatch">
      <img src="img/画像.jpg" width="auto" height="auto" alt="アイキャッチが表示されてません">
    </div>
    <div id="main" class="container">
      <div id="posts">
        <div class="post">
          <div class="post-header">
            <p class="meta">
              <time itemprop="datePublished">2019.3.3</time>
            </p>
            <h2>
              <a href="">title</a>
            </h2>
            <div class="cat">
              <a href="" rel="category tag">【カテゴリ】</a>
            </div>
          </div>
          <div class="post-content">
            <div class="post-image">
              <img src="img/画像.jpg" width="800" height="auto"
              alt="アイキャッチが表示されてません">
            </div>
            <div class="post-body">
              <p>本文ほんぶん本文ほんぶん本文ほんぶん
                本文ほんぶん本文ほんぶん本文ほんぶん本文ほんぶん
                  本文ほんぶん</p>
            </div>
          </div>
        </div> <!-- /post -->
        <div class="navigation">
          <div class="prev">⬅️Prev Page</div>
          <div class="next">Next Page➡️</div>
        </div>
      </div> <!-- /posts -->
      <div id="sidebar">
        <div class="widget">
          <h3>カテゴリ一覧</h3>
          <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
          </ul>
        </div>
      </div> <!-- /sidebar -->
    </div>

    <div id="footer">
      <div class="footer-a">
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT</a></li>
          <li><a href="">問い合わせ(INQUIRY)</a></li>
          <li><a href="">PRIVACY POLICY</a></li>
          <li><a href="">SITE MAP</a></li>
        </ul>
        <p>当サイトは、〜〜</p>
    </div>
  </div>
</div>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2019/04/02 14:46 編集

    問題のページを Webブラウザで表示して、関連する部分の HTML と CSS を質問に記載していただくことは可能でしょうか?

    Webサイトの URL を公開しても問題ない場合は、URL の提示でも OK です。

    キャンセル

  • CHERRY

    2019/04/02 15:16

    https://teratail.com/help/question-tips#questionTips3-3-1 を参考にして、コード部分は、 <code>ボタン等を使って、マークダウンで記載していだだけないでしょうか?

    キャンセル

  • dit.

    2019/04/02 15:17

    phpではなく実際に生成されたHTMLを提示することはできますか?
    また、teratailでは質問やコードを見やすくする仕組みがあります。
    ```言語名
    コード
    ```
    のように書き、各コードの間には1行空白行を入れてください。
    パソコンからの投稿・編集の場合右側にプレビューが出ていると思いますので、確認しながら編集してください。

    キャンセル

回答 1

+2

直接の解決につながるかわかりませんが、
index.phpの最後の方
<div id="sidebar" <?php get_sidebar(); ?> </div>

<div id="sidebar"> <?php get_sidebar(); ?> </div>
こうでしょうか?>が足りないかと。

それと、
sidebar.phpでもid="sidebar"があるので重複してます。


直らないかもしれないけどもうひとつ気づいた部分とこう直した方がいいのではという内容
index.php

              <?php if(has_post_thumbnail()) :?>
              <?php the_post_thumbnail(array(100,100));?>
              <?php else: ?>
                <img src="<?php echo get_template_directory_uri();?>/img/thumnail.jpg" width="800" height="auto"><!--  ←ここも>が足りない -->
              <?php endif;?>

(中略)

    </div> <!-- /main -->
<?php get_sidebar(); ?> <!-- 前後のdivを削除/sidebar.phpはそのまま -->

<?php get_footer(); ?>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/02 15:45

    ありがとうございます。
    よくわかりませんが、この状態だと予想通りの形になり、>を足して、idをひとつに直すと形が崩れる現象になってしまいました。これはstyle.cssの問題だと思いますので、直したいと思います。
    リンクについては、どちらでも相変わらず作動しません。

    キャンセル

  • 2019/04/02 16:42

    「idを一つに直すと」の際、</div>も消さないと崩れると思いますがそこは大丈夫でしょうか?
    念のためこの後回答に追記します。

    キャンセル

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

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

関連した質問

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