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

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

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

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

Q&A

解決済

1回答

260閲覧

ワードプレス:投稿一覧のページャーを設置しましたが、次のページに行くと表示のリンクが切れてしまいます。

konoha0708

総合スコア36

WordPress

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

0グッド

0クリップ

投稿2018/02/22 04:32

編集2018/02/22 04:34

ワードプレス:投稿の一覧にページャーを設置しました。「functions.php」でウィジェットを有効にし、カテゴリごとの一覧を表示しています。
サイドバーから、カテゴリを選択後、一ページ目は表示されていますが、次のページに行くと階層が深くなるためcssのリンクが切れてしまいます。
※htmlの静的ページにワードプレスを一部使用(投稿、新着)しているため、header.phpのcssのリンクは「<link href="../../../../unity-0124/css/style.css" rel="stylesheet" type="text/css">」のように、「../../../../」を使っています。
※上記の設定でも「functions.php」で追加した、「新着ニュース」の機能については、ページャーも問題なく動作しています。

サイドバーの「カテゴリ」から、「カテゴリ1」をクリックした後に表示される「category.php」上で、次のページに行ったとき、cssのリンクが自動的につながるようにするにはどのようにしたらよいでしょうか?

イメージ説明

イメージ説明

category.php

1 2【category.php】 3<?php get_header(); ?> 4<div class="n-c1"> 5 <div class="container"> 6 <div class="row"> 7 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 news"> 8 <h2>CATEGORY<span class="hidden-xs"><?php single_cat_title(); ?>一覧</span></h2> 9 <div class="news-box-n archive-newsbox"> 10 11 12 <?php if(have_posts()): while(have_posts()): the_post(); ?> 13 14 15 <!-- /news一つ分 --> 16 <div class="row news-box-inner"> 17 18 <div class="col-xs-3 col-md-2 col-lg-2 col-sm-2"> 19 <a href="<?php the_permalink();?>"> 20 <?php echo wp_get_attachment_image(post_custom('top-thumbnail'),'full'); ?> 21 </a> 22 </div> 23 <!-- / .col-xs-2 col-md-2 col-lg-2 col-sm-2 --> 24 <div class="col-xs-9 col-sm-10 col-md-10 col-lg-10"> 25 <p class="date"> 26 <?php echo get_the_date('Y年m月d日');?> 27 </p> 28 <p class="n-title"> 29 <a href="<?php the_permalink();?>"> 30 <?php the_title();?> 31 </a> 32 </p> 33 <br> 34 </div> 35 <!-- / .col-xs-10 col-sm-10 col-md-10 col-lg-10 --> 36 </div> 37 <!-- / .row news-box-inner --> 38 <!-- /news一つ分 ここまで --> 39 <?php endwhile; endif; ?> 40 41 <div class="tablenav"> 42 <?php global $wp_rewrite; 43$paginate_base = get_pagenum_link(1); 44if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) { 45 $paginate_format = ''; 46 $paginate_base = add_query_arg('paged', '%#%'); 47} else { 48 $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') . 49 user_trailingslashit('page/%#%/', 'paged');; 50 $paginate_base .= '%_%'; 51} 52echo paginate_links( array( 53 'base' => $paginate_base, 54 'format' => $paginate_format, 55 'total' => $wp_query->max_num_pages, 56 'mid_size' => 10, 57 'current' => ($paged ? $paged : 1), 58)); ?></div> 59 </div> 60 <!-- / .news-box-n archive-newsbox --> 61 </div> 62 <!-- / .col-xs-12 col-sm-12 col-md-12 col-lg-12 news --> 63 <?php get_sidebar(); ?> 64 65 </div> 66 <!-- / .row --> 67 68 </div> 69 <!-- / .container --> 70 71</div> 72<!-- / .n-c1 --> 73<?php get_footer(); ?>

functions.php

1 2【functions.php】 3 4<?php 5/* * カスタム投稿タイプ:新着情報 */ 6 register_post_type( 7 'news', array( 8 'labels' => array( 9 'name' => '新着情報', 10 'add_new_item' => '追加:新着情報', 11 'edit_item' => '編集:新着情報' ), 12 'public' => true, 13 'supports' => array('title', 'editor') ) ); 14// アイキャッチ画像を有効にする。 15add_theme_support('post-thumbnails'); 16// 使用しないメニューを非表示にする 17function remove_admin_menus() { 18 19 20 global $menu; 21 22 // unsetで非表示にするメニューを指定 23 unset($menu[25]); // コメント 24 25} 26add_action('admin_menu', 'remove_admin_menus'); 27 28//サイドバーを1つ設置する 29register_sidebar(array( 30 'name'=>'サイドバー', 31 'before_widget'=>'<div class="widget">', 32 'after_widget'=>'</div>', 33 'before_title' => '<h3 class="side_headline">', 34 'after_title' => '</h3>' 35));

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

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

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

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

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

guest

回答1

0

ベストアンサー

リンクを相対パスで指定しているとWordPressでは特にこういう不具合が起こりやすいので、動的に読み込むPHP(WordPress側)ではhome url()を使って絶対パスに変更した方が良いです。

例:

<link href="<?php echo home_url(); ?>/unity-0124/css/style.css" rel="stylesheet" type="text/css">

投稿2018/02/22 04:53

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

konoha0708

2018/02/22 05:32

回答ありがとうございます。説明が足らずすみません。 htmlの静的ページにワードプレスを組み込んでいるため、フォルダ階層が下記のようになっています。 【cssの場所】※他のhtmlファイルもC:\xampp\htdocs\unity-0124の直下にあります。 C:\xampp\htdocs\unity-0124\css\style.css 【header.phpの場所】 C:\xampp\htdocs\unity-0124\wp\wp-content\themes\unity-0124-box\header.php 上記の場合、<?php echo home_url(); ?>とすると、「C:\xampp\htdocs\unity-0124\wp」を参照してしまうため、表示が崩れてしまいます。 cssをwpのほうにも、コピーしたもの(同じもの)を入れたほうが良いのでしょうか。できれば、 C:\xampp\htdocs\unity-0124\css\を参照できればと思っているのですが。
退会済みユーザー

退会済みユーザー

2018/02/22 05:48

CSSをWordPress側に移して、HTML側でもWPのCSSを読み込む という方が管理や階層で悩む事は無さそうですが、 この場合だとルート相対パスで指定するのが良いかもしれませんね <link href="/unity-0124/css/style.css" rel="stylesheet">
konoha0708

2018/02/22 06:00

ルート相対パスにしてみたら、できました! ルート相対パスって、そういうものだったのですね。。 いつもありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問