質問編集履歴

6 こういうイメージで作っています

gomatan1258

gomatan1258 score 41

2017/10/12 19:28  投稿
ワードプレスでわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
index.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <?php $p_slug = get_page_uri(get_the_ID()); ?>   
               <div id="<?php echo $p_slug ?>"></div>
               <div id="test"></div>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </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(); ?>/images.jpg" width="100" height="100">
                       <?php endif; ?>
                       </div>
                       <div class="post-body">
                           <div class="post-body-excerpt">
                               <?php the_content('',false,''); ?>
                           </div>
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>
                       </div>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
               <div class="navigation">
                   <div class="prev"><?php previous_posts_link(); ?></div>
                   <div class="next"><?php next_posts_link(); ?></div>
               </div>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
single.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </div>
                   <div class="post-content">
                       <p>
                           <?php the_content(); ?>
                       </p>
                   </div>
               </div>
               <div class="navigation">
                   <div class="prev"><?php previous_post_link(); ?></div>
                   <div class="next"><?php next_post_link(); ?></div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
sidebar.php
```php
<div id="sidebar">
               <?php dynamic_sidebar(); ?>
           </div><!--/sidebar-->
```
function.php
```php
<?php
add_theme_support( 'custom-header' );
add_theme_support('menus');
register_sidebar(
   array(
       before_widget => '<div class="widget">',
       after_widget => '</div>',
       before_title => '<h3>',
       after_title => '</h3>',
   )       
);
add_theme_support('post-thumbnails');
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
?>
```
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
カスタムHTMLのウィジェットを追加して以下を書き込む
[my_php file="recent_posts"]
ワードプレスのjavascriptのプラグイン
```javascript
jQuery(function() {
   jQuery(".menu li").hover(function() {
       jQuery(this).children('ul').show();
   }, function() {
       jQuery(this).children('ul').hide();
   });//プルダウンメニューが表示されます
    var page;
   jQuery('.more a').on('click', function(event) {
       //aリンクの動作を停止
       event.preventDefault();
       //リンク先URLを取得
       page = jQuery(this).attr('href');
       jQuery(this).parent().load(page+' div.post-content p',function(){
           jQuery(this).parent().children().eq(0).hide();
       });
         //続きを読む ajaxでページ遷移せずにsingle.phpの一部が表示される
   });
     jQuery('a[href^=#]').click(function(){
       var speed = 500;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top;
       jQuery("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });//ページ内リンクすることができる
});
```
関係のないテンプレートの表記を削除しました。
昨日教えていただいたコードでrecent_posts.phpの"http://投稿一覧のURL"において、http://localhost/wordpress/blog/とすると、そのページにしか遷移しないので、それをlocalhost/wordpress/blog/2/やlocalhost/wordpress/blog/3/といった風にphpのコードを埋めてページ遷移させたいです。よろしくお願いします。
昨日教えていただいたコードでrecent_posts.phpの"http://投稿一覧のURL"において、http://localhost/wordpress/blog/とすると、そのページにしか遷移しないので、それをlocalhost/wordpress/blog/2/やlocalhost/wordpress/blog/3/といった風にphpのコードを埋めてページ遷移させたいです。よろしくお願いします。
recent_posts.php
```php
<?php
$args = array(
       'post_type' => 'post',
       'posts_per_page' => 5,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ):
while ( $the_query->have_posts() ):
$the_query->the_post();
$category = get_the_category();
$category_link = get_category_link( $category[0]->term_id );
?>
<?php $p_slug = get_page_uri(get_the_ID()); ?>
<p><a href="<?php echo $category_link.'#'.$p_slug; ?>" ><?php the_title(); ?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
```
とやるとリンクさきのidにページ内リンクできました。
  • WordPress

    10669 questions

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

gomatan1258

gomatan1258 score 41

2017/10/12 12:33  投稿
ワードプレスでわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
index.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <?php $p_slug = get_page_uri(get_the_ID()); ?>   
               <div id="<?php echo $p_slug ?>"></div>
               <div id="test"></div>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </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(); ?>/images.jpg" width="100" height="100">
                       <?php endif; ?>
                       </div>
                       <div class="post-body">
                           <div class="post-body-excerpt">
                               <?php the_content('',false,''); ?>
                           </div>
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>
                       </div>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
               <div class="navigation">
                   <div class="prev"><?php previous_posts_link(); ?></div>
                   <div class="next"><?php next_posts_link(); ?></div>
               </div>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
single.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </div>
                   <div class="post-content">
                       <p>
                           <?php the_content(); ?>
                       </p>
                   </div>
               </div>
               <div class="navigation">
                   <div class="prev"><?php previous_post_link(); ?></div>
                   <div class="next"><?php next_post_link(); ?></div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
sidebar.php
```php
<div id="sidebar">
               <?php dynamic_sidebar(); ?>
           </div><!--/sidebar-->
```
function.php
```php
<?php
add_theme_support( 'custom-header' );
add_theme_support('menus');
register_sidebar(
   array(
       before_widget => '<div class="widget">',
       after_widget => '</div>',
       before_title => '<h3>',
       after_title => '</h3>',
   )       
);
add_theme_support('post-thumbnails');
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
?>
```
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
カスタムHTMLのウィジェットを追加して以下を書き込む
[my_php file="recent_posts"]
ワードプレスのjavascriptのプラグイン
```javascript
jQuery(function() {
   jQuery(".menu li").hover(function() {
       jQuery(this).children('ul').show();
   }, function() {
       jQuery(this).children('ul').hide();
   });//プルダウンメニューが表示されます
    var page;
   jQuery('.more a').on('click', function(event) {
       //aリンクの動作を停止
       event.preventDefault();
       //リンク先URLを取得
       page = jQuery(this).attr('href');
       jQuery(this).parent().load(page+' div.post-content p',function(){
           jQuery(this).parent().children().eq(0).hide();
       });
         //続きを読む ajaxでページ遷移せずにsingle.phpの一部が表示される
   });
     jQuery('a[href^=#]').click(function(){
       var speed = 500;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top;
       jQuery("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });//ページ内リンクすることができる
});
```
関係のないテンプレートの表記を削除しました。
関係のないテンプレートの表記を削除しました。
昨日教えていただいたコードでrecent_posts.phpの"http://投稿一覧のURL"において、http://localhost/wordpress/blog/とすると、そのページにしか遷移しないので、それをlocalhost/wordpress/blog/2/やlocalhost/wordpress/blog/3/といった風にphpのコードを埋めてページ遷移させたいです。よろしくお願いします。
  • WordPress

    10669 questions

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

gomatan1258

gomatan1258 score 41

2017/10/12 12:27  投稿
ワードプレスでわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
index.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <?php $p_slug = get_page_uri(get_the_ID()); ?>   
               <div id="<?php echo $p_slug ?>"></div>
               <div id="test"></div>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </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(); ?>/images.jpg" width="100" height="100">
                       <?php endif; ?>
                       </div>
                       <div class="post-body">
                           <div class="post-body-excerpt">
                               <?php the_content('',false,''); ?>
                           </div>
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>
                       </div>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
               <div class="navigation">
                   <div class="prev"><?php previous_posts_link(); ?></div>
                   <div class="next"><?php next_posts_link(); ?></div>
               </div>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
single.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </div>
                   <div class="post-content">
                       <p>
                           <?php the_content(); ?>
                       </p>
                   </div>
               </div>
               <div class="navigation">
                   <div class="prev"><?php previous_post_link(); ?></div>
                   <div class="next"><?php next_post_link(); ?></div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
sidebar.php
```php
<div id="sidebar">
               <?php dynamic_sidebar(); ?>
           </div><!--/sidebar-->
```
footer.php
```php
<div id="footer" class="container">
           Copyright 2017<?php if(date("Y")!=2017) echo date("-Y"); ?> All right reserved, gomatan1258
       </div><!--/footer-->
       <?php wp_footer(); ?>
   </body>
</html>
```
function.php
```php
<?php
add_theme_support( 'custom-header' );
add_theme_support('menus');
register_sidebar(
   array(
       before_widget => '<div class="widget">',
       after_widget => '</div>',
       before_title => '<h3>',
       after_title => '</h3>',
   )       
);
add_theme_support('post-thumbnails');
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
?>
```
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
カスタムHTMLのウィジェットを追加して以下を書き込む
[my_php file="recent_posts"]
ワードプレスのjavascriptのプラグイン
```javascript
jQuery(function() {
   jQuery(".menu li").hover(function() {
       jQuery(this).children('ul').show();
   }, function() {
       jQuery(this).children('ul').hide();
   });//プルダウンメニューが表示されます
    var page;
   jQuery('.more a').on('click', function(event) {
       //aリンクの動作を停止
       event.preventDefault();
       //リンク先URLを取得
       page = jQuery(this).attr('href');
       jQuery(this).parent().load(page+' div.post-content p',function(){
           jQuery(this).parent().children().eq(0).hide();
       });
         //続きを読む ajaxでページ遷移せずにsingle.phpの一部が表示される
   });
     jQuery('a[href^=#]').click(function(){
       var speed = 500;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top;
       jQuery("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });//ページ内リンクすることができる
});
```
関係のないテンプレートの表記を削除しました。
  • WordPress

    10669 questions

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

gomatan1258

gomatan1258 score 41

2017/10/12 12:26  投稿
昨日のワードプレスの質問でわからないことがあります。
ワードプレスでわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
index.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <?php $p_slug = get_page_uri(get_the_ID()); ?>   
               <div id="<?php echo $p_slug ?>"></div>
               <div id="test"></div>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </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(); ?>/images.jpg" width="100" height="100">
                       <?php endif; ?>
                       </div>
                       <div class="post-body">
                           <div class="post-body-excerpt">
                               <?php the_content('',false,''); ?>
                           </div>
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>
                       </div>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
               <div class="navigation">
                   <div class="prev"><?php previous_posts_link(); ?></div>
                   <div class="next"><?php next_posts_link(); ?></div>
               </div>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
single.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </div>
                   <div class="post-content">
                       <p>
                           <?php the_content(); ?>
                       </p>
                   </div>
               </div>
               <div class="navigation">
                   <div class="prev"><?php previous_post_link(); ?></div>
                   <div class="next"><?php next_post_link(); ?></div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
sidebar.php
```php
<div id="sidebar">
               <?php dynamic_sidebar(); ?>
           </div><!--/sidebar-->
```
header.php
```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/3.18.1/build/cssreset/cssreset-min.css">
       <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
       <?php wp_head(); ?>
   </head>
   <body>
       <?php if(is_front_page()) { if (get_header_image() !='') { ?>
       <div id="main_image">
           <img src="<?php header_image(); ?>" alt="" title="" />
       </div>
       <?php }; }; ?>
       <div id="header" class="container">
           <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name');?></a></h1>
           <div class="wrapper"><?php wp_nav_menu(); ?></div>
       </div><!--/header-->
```
page.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-content">
                       <?php the_content(); ?>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>ページはありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
footer.php
```php
<div id="footer" class="container">
           Copyright 2017<?php if(date("Y")!=2017) echo date("-Y"); ?> All right reserved, gomatan1258
       </div><!--/footer-->
       <?php wp_footer(); ?>
   </body>
</html>
```
function.php
```php
<?php
add_theme_support( 'custom-header' );
add_theme_support('menus');
register_sidebar(
   array(
       before_widget => '<div class="widget">',
       after_widget => '</div>',
       before_title => '<h3>',
       after_title => '</h3>',
   )       
);
add_theme_support('post-thumbnails');
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
?>
```
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
 
編集しなおしました。  
 
追記です。  
サイドバーにあるワードプレスに最初からついているカスタムHTMLのウィジェットです。  
ショートコードも書き漏れがありました。  
 
カスタムHTMLのウィジェットを追加して以下を書き込む
[my_php file="recent_posts"]
[my_php file="recent_posts"]
ワードプレスのjavascriptのプラグイン
```javascript
jQuery(function() {
   jQuery(".menu li").hover(function() {
       jQuery(this).children('ul').show();
   }, function() {
       jQuery(this).children('ul').hide();
   });//プルダウンメニューが表示されます
    var page;
   jQuery('.more a').on('click', function(event) {
       //aリンクの動作を停止
       event.preventDefault();
       //リンク先URLを取得
       page = jQuery(this).attr('href');
       jQuery(this).parent().load(page+' div.post-content p',function(){
           jQuery(this).parent().children().eq(0).hide();
       });
         //続きを読む ajaxでページ遷移せずにsingle.phpの一部が表示される
   });
     jQuery('a[href^=#]').click(function(){
       var speed = 500;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top;
       jQuery("html, body").animate({scrollTop:position}, speed, "swing");
       return false;
   });//ページ内リンクすることができる
});
```
関係のないテンプレートの表記を削除しました。
  • WordPress

    10669 questions

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

gomatan1258

gomatan1258 score 41

2017/10/12 12:12  投稿
昨日のワードプレスの質問でわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
index.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <?php $p_slug = get_page_uri(get_the_ID()); ?>   
               <div id="<?php echo $p_slug ?>"></div>
               <div id="test"></div>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </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(); ?>/images.jpg" width="100" height="100">
                       <?php endif; ?>
                       </div>
                       <div class="post-body">
                           <div class="post-body-excerpt">
                               <?php the_content('',false,''); ?>
                           </div>
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>
                       </div>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
               <div class="navigation">
                   <div class="prev"><?php previous_posts_link(); ?></div>
                   <div class="next"><?php next_posts_link(); ?></div>
               </div>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
single.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-meta">
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】
                   </div>
                   <div class="post-content">
                       <p>
                           <?php the_content(); ?>
                       </p>
                   </div>
               </div>
               <div class="navigation">
                   <div class="prev"><?php previous_post_link(); ?></div>
                   <div class="next"><?php next_post_link(); ?></div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>記事はありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
sidebar.php
```php
<div id="sidebar">
               <?php dynamic_sidebar(); ?>
           </div><!--/sidebar-->
```
header.php
```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/3.18.1/build/cssreset/cssreset-min.css">
       <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
       <?php wp_head(); ?>
   </head>
   <body>
       <?php if(is_front_page()) { if (get_header_image() !='') { ?>
       <div id="main_image">
           <img src="<?php header_image(); ?>" alt="" title="" />
       </div>
       <?php }; }; ?>
       <div id="header" class="container">
           <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name');?></a></h1>
           <div class="wrapper"><?php wp_nav_menu(); ?></div>
       </div><!--/header-->
```
page.php
```php
<?php get_header(); ?>
       <div id="main" class="container">
           <div id="posts">
               <?php if(have_posts()):
                       while(have_posts()):
                           the_post();
               ?>
               <div class="post">
                   <div class="post-header">
                       <h2>
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                       </h2>
                   </div>
                   <div class="post-content">
                       <?php the_content(); ?>
                   </div>
               </div>
               <?php endwhile;
               else:
               ?>
               <p>ページはありません！</p>
               <?php endif;
               ?>
           </div><!--/posts-->
           <?php get_sidebar(); ?>
       </div><!--/main -->
       <?php get_footer(); ?>
```
footer.php
```php
<div id="footer" class="container">
           Copyright 2017<?php if(date("Y")!=2017) echo date("-Y"); ?> All right reserved, gomatan1258
       </div><!--/footer-->
       <?php wp_footer(); ?>
   </body>
</html>
```
function.php
```php
<?php
add_theme_support( 'custom-header' );
add_theme_support('menus');
register_sidebar(
   array(
       before_widget => '<div class="widget">',
       after_widget => '</div>',
       before_title => '<h3>',
       after_title => '</h3>',
   )       
);
add_theme_support('post-thumbnails');
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
?>
```
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
編集しなおしました。
編集しなおしました。
追記です。
サイドバーにあるワードプレスに最初からついているカスタムHTMLのウィジェットです。
ショートコードも書き漏れがありました。
カスタムHTMLのウィジェットを追加して以下を書き込む
[my_php file="recent_posts"]
  • WordPress

    10669 questions

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

gomatan1258

gomatan1258 score 41

2017/10/12 11:56  投稿
昨日のワードプレスの質問でわからないことがあります。
[昨日の質問](https://teratail.com/questions/95859)
調べてもなかなか検索できないので教えてください。
 
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。  
 
index.php  
```php  
<?php get_header(); ?>  
       <div id="main" class="container">  
           <div id="posts">  
 
               <?php if(have_posts()):  
                       while(have_posts()):  
                           the_post();  
 
               ?>  
               <?php $p_slug = get_page_uri(get_the_ID()); ?>     
               <div id="<?php echo $p_slug ?>"></div>  
 
               <div id="test"></div>  
               <div class="post">  
                   <div class="post-header">  
                       <h2>  
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>  
                       </h2>  
                   </div>  
                   <div class="post-meta">  
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】  
                   </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(); ?>/images.jpg" width="100" height="100">  
                       <?php endif; ?>  
 
                       </div>  
                       <div class="post-body">  
                           <div class="post-body-excerpt">  
                               <?php the_content('',false,''); ?>  
                           </div>  
 
                           <div class="more"><a href="<?php the_permalink(); ?>">続きを読む</a></div>  
                           <a href="<?php echo '#'.$p_slug ?>">ここ</a>  
                       </div>  
 
                   </div>  
               </div>  
               <?php endwhile;  
               else:  
               ?>  
 
               <p>記事はありません！</p>  
 
               <?php endif;  
               ?>  
 
               <div class="navigation">  
                   <div class="prev"><?php previous_posts_link(); ?></div>  
                   <div class="next"><?php next_posts_link(); ?></div>  
               </div>  
           </div><!--/posts-->  
           <?php get_sidebar(); ?>  
       </div><!--/main -->  
       <?php get_footer(); ?>  
```  
single.php  
```php  
<?php get_header(); ?>  
       <div id="main" class="container">  
           <div id="posts">  
 
               <?php if(have_posts()):  
                       while(have_posts()):  
                           the_post();  
 
               ?>  
               <div class="post">  
                   <div class="post-header">  
                       <h2>  
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>  
                       </h2>  
                   </div>  
                   <div class="post-meta">  
                       <?php echo get_the_date(); ?> 【<?php the_category(', ') ?>】  
                   </div>  
                   <div class="post-content">  
                       <p>  
                           <?php the_content(); ?>  
                       </p>  
 
                   </div>  
               </div>  
 
               <div class="navigation">  
                   <div class="prev"><?php previous_post_link(); ?></div>  
                   <div class="next"><?php next_post_link(); ?></div>  
               </div>  
 
               <?php endwhile;  
               else:  
               ?>  
 
               <p>記事はありません！</p>  
 
               <?php endif;  
               ?>  
 
           </div><!--/posts-->  
           <?php get_sidebar(); ?>  
       </div><!--/main -->  
       <?php get_footer(); ?>  
```  
sidebar.php  
```php  
<div id="sidebar">  
               <?php dynamic_sidebar(); ?>  
           </div><!--/sidebar-->  
```  
header.php  
```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/3.18.1/build/cssreset/cssreset-min.css">  
       <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">  
       <?php wp_head(); ?>  
   </head>  
   <body>  
       <?php if(is_front_page()) { if (get_header_image() !='') { ?>  
       <div id="main_image">  
           <img src="<?php header_image(); ?>" alt="" title="" />  
       </div>  
       <?php }; }; ?>  
       <div id="header" class="container">  
           <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name');?></a></h1>  
           <div class="wrapper"><?php wp_nav_menu(); ?></div>  
       </div><!--/header-->  
```  
page.php  
```php  
<?php get_header(); ?>  
       <div id="main" class="container">  
           <div id="posts">  
 
               <?php if(have_posts()):  
                       while(have_posts()):  
                           the_post();  
 
               ?>  
               <div class="post">  
                   <div class="post-header">  
                       <h2>  
                           <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>  
                       </h2>  
                   </div>  
 
                   <div class="post-content">  
                       <?php the_content(); ?>  
 
                   </div>  
               </div>  
 
               <?php endwhile;  
               else:  
               ?>  
 
               <p>ページはありません！</p>  
 
               <?php endif;  
               ?>  
 
           </div><!--/posts-->  
           <?php get_sidebar(); ?>  
       </div><!--/main -->  
       <?php get_footer(); ?>  
```  
footer.php  
```php  
<div id="footer" class="container">  
           Copyright 2017<?php if(date("Y")!=2017) echo date("-Y"); ?> All right reserved, gomatan1258  
       </div><!--/footer-->  
       <?php wp_footer(); ?>  
 
   </body>  
</html>  
```  
function.php  
```php  
<?php  
 
add_theme_support( 'custom-header' );  
 
add_theme_support('menus');  
 
register_sidebar(  
   array(  
       before_widget => '<div class="widget">',  
       after_widget => '</div>',  
       before_title => '<h3>',  
       after_title => '</h3>',  
   )         
);  
 
add_theme_support('post-thumbnails');  
 
$cssdir = get_stylesheet_directory_uri();  
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));  
 
// ウィジェットでショートコードを使えるようにする  
add_filter( 'widget_text', 'do_shortcode' );  
 
// 任意のPHPファイルをショートコード化して扱えるようにする  
function php_shortcode( $params = array() ) {  
   extract( shortcode_atts( array(  
       'file' => 'default'  
   ), $params ));  
   ob_start();  
   include( get_template_directory() . "/$file.php" );  
   return ob_get_clean();  
}  
add_shortcode( 'my_php', 'php_shortcode' );  
 
?>  
```  
recent_posts.php
```php
<?php
$args = array(
   'post_type' => 'post', //ポストタイプ
   'posts_per_page' => 5, //表示件数
   );
   $the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ):
   while ( $the_query->have_posts() ):
   $the_query->the_post();
?>
<p><a href="http://投稿一覧のURL" ><?php the_title();?></a></p>
<?php
endwhile;
endif;
wp_reset_query();
?>
```
functions.php
```php
// ウィジェットでショートコードを使えるようにする
add_filter( 'widget_text', 'do_shortcode' );
// 任意のPHPファイルをショートコード化して扱えるようにする
function php_shortcode( $params = array() ) {
   extract( shortcode_atts( array(
       'file' => 'default'
   ), $params ));
   ob_start();
   include( get_template_directory() . "/$file.php" );
   return ob_get_clean();
}
add_shortcode( 'my_php', 'php_shortcode' );
```
ウィジェットについて、すごくご丁寧に教えていただいたのですが、"http://投稿一覧のURL"の部分で、記事一覧の投稿が表示されるページが複数あったときに、その記事の載っている記事一覧のページにページ遷移させたいのですが、やりかたが分かりませんので教えてください。調べ方が下手でなかなかそのやり方が書いてあるサイトにたどり着けなく、６時間はまっています。
編集しなおしました。
  • WordPress

    10669 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る