求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

WordPress - オリジナルテーマ例

オリジナルテーマ例

  • 更新する投稿記事とそれ以外を区別します
  • 各テンプレートは、WordPress関数でインクルードします
  • サーバーにアップロード後、ダッシュボードの設定と微調整をおこないます
  • 画像投稿は、アップロード後におこないます
index.php
<?php get_header(); ?>

<div class="container">
<main class="main">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta">
  <span class="post-date"><?php echo get_the_date(); ?></span>
  <span class="category">カテゴリー : <a href="#"><?php the_category(', '); ?></a></span>
  <span class="comment-num"><a href="#">コメント : <?php comments_number('0','1','2'); ?></a></span>
</p><!-- /.post-meta -->
<?php the_content(); ?>
<p class="more-link"><a href="<?php the_permalink(); ?>">続きを読む &raquo;</a></p>

</article><!-- /.post -->
<?php endwhile; endif; ?>

<?php if($wp_query->max_num_pages>1): ?>
<div class="pager">
  <span class="alignleft"><?php next_posts_link('&laquo; 古い記事'); ?></span>
  <span class="alignright"><?php previous_posts_link('新しい記事 &raquo;'); ?></span>
</div><!-- /.pager -->
<?php endif; ?>

</main><!-- /.main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> 
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header class="header">
  
<div class="container">
<div class="siteinfo">
<h1 class="logo">
<a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
</h1>
<p id="description"><?php bloginfo('description'); ?></p>
</div><!-- /.siteinfo -->

<div class="searchblock">
<form action="<?php echo home_url('/'); ?>" method="get" class="searchform">
<input type="text" placeholder="検索" name="search" class="search"><i class="fa fa-search" aria-hidden="true"></i>
</form>
</div><!-- /.searchblock -->
</div><!-- /.container -->

<nav class="gnav">
<div class="container">
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
</div><!-- /.container -->
</nav>
</header><!-- /.header -->
footer.php
</div><!-- /.container -->

<div class="footer">
<p class="copyright">&copy; <?php bloginfo('name'); ?></p>
</div><!-- /.footer -->
<?php wp_footer(); ?>
</body>
</html>
single.php
<?php get_header(); ?>

  
<div class="container">
<main class="main">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta">
  <span class="post-date"><?php echo get_the_date(); ?></span>
  <span class="category">カテゴリー : <a href="#"><?php the_category(', '); ?></a></span>
  <span class="comment-num"><a href="#">コメント : <?php comments_number('0','1','2'); ?></a></span>
</p><!-- /.post-meta -->
<?php the_content(); ?>

<p class="footer-post-meta">
<?php the_tags('Tag : ',', '); ?> 
<?php if ( is_multi_author() ): ?> 
<span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span> 
<?php endif; ?> 
</p>

</article><!-- /.post -->
<?php endwhile; 
else: ?>
<article class="post">
  <h2>記事はありません</h2>
  <p>お探しの記事は見つかりませんでした。</p>
</article>
<?php endif; ?>

<?php if(get_previous_post()): ?>
<div class="pager">
  <span class="alignleft"><?php previous_post_link('%link', '« %title'); ?></span>
<?php endif; 
  if( get_next_post() ): ?> 
  <span class="alignright"><?php next_post_link('%link', '%title »'); ?></span>
</div><!-- /.pager -->
  
<?php /*?><?php comments_template(); ?><?php */?>
  
<?php endif; ?>
  
</main><!-- /.main -->


<?php get_sidebar(); ?>

<?php get_footer(); ?>
page.php
<?php get_header(); ?>

  
<div class="container">
<main class="main">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<?php the_content(); ?>

</article><!-- /.post -->
<?php endwhile; 
else: ?>
<article class="post">
  <h2>記事はありません</h2>
  <p>お探しの記事は見つかりませんでした。</p>
</article>
<?php endif; ?>

  
</main><!-- /.main -->


<?php get_sidebar(); ?>

<?php get_footer(); ?>
functions.php
<?php

register_sidebar( array(
  'name' => 'サイドバーウィジット-1', 
  'id' => 'sidebar-1', 
  'description' => 'サイドバーのウィジットエリアです。', 
  'before_widget' => '<div id="%1$s" class="widget %2$s">', 
  'after_widget' => '</div>', 
) );

add_theme_support( 'menus' );

register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
comments.php
<div id="comment-area">
<?php if( have_comments() ): ?>
    <h3 id="comments">コメント</h3>
    <ol class="comments-list">
        <?php wp_list_comments( 'avatar_size=55' ); ?>
    </ol>
    <div class="comment-page-link">
        <?php paginate_comments_links();?>
    </div>
<?php endif;

$args = array(
    'title_reply'	=> 'コメントを残す',
    'label_submit'	=> 'コメントを送信',
);
comment_form( $args ); ?>
</div><!-- /#comment-area -->
style.scss
@charset "UTF-8";

/* reset
------------------------------------------------- */
html, body, h1, h2, h3, p, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}

/* variable
------------------------------------------------- */
$color_anchor: #8a532b;
$color_hover: #fefce9;

/* link
------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  border-bottom: 1px dotted $color_anchor;
  color: $color_anchor;
}

/* body
------------------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family:
    'Hiragino Kaku Gothic Pro',
    Meiryo,
    sans-serif;
}

/* layout
------------------------------------------------- */
.container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 960px;
}

/* header
------------------------------------------------- */
.header > .container {
  margin-bottom: 20px;
  padding-top: 40px;
  h1 {
    margin-bottom: 10px;
    font-size: 240%;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    color: $color_anchor;
  }
  .searchblock {
      width: 240px;
      .searchform {
        margin-top: 50px;
      }
      .search {
        padding: 6px 10px;
        font-size: 1.0em;
      }
  .fa-search {
    margin-left: -30px;
    }
  }
}

/* nav
------------------------------------------------- */
.gnav > .container {
  border-bottom: 1px solid #ddd;
  margin-bottom: 40px;
  .menu {
    display: flex;
    justify-content: flex-start;
    border-left: 1px solid #ddd;
    li {
      position: relative;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-weight: bold;
      a {
        display: block;
        padding: 14px 20px;
        color: $color_anchor;
        &:hover {
          background: $color_anchor;
          color: #fff;
        }
      }
      &.current_page_item a {
        background: $color_anchor;
        color: #fff;
      }
    }
  
  }
}
ul.sub-menu, ul.children {
  position: absolute;
  left:-1px;
  display: none;
  margin-left: 0;
  width: auto;
  width: 150px;
  border: 1px solid #ddd;
  background: #eee;
}
.sub-menu li, .children li {
  position: relative;
  border: none;
}
ul.sub-menu ul, ul.children ul {
  top:-1px;
  left:150px;
}
.menu li:hover > ul{
  display: block;
  text-decoration: none;
}

/* main
------------------------------------------------- */
.main {
  width: 650px;
  .post, .page {
    margin-bottom: 50px;
    line-height: 1.6;
    h2 {
      margin-bottom: 16px;
      a {
        color: $color_anchor;
      }
    }
    .post-meta {
      margin-bottom: 10px;
      .post-date, .category {
        padding-right: 1em;
        a {
          border-bottom: 1px dotted $color_anchor;
        }
      }
      .comment-num {
        white-space: nowrap;
      }
    }
    .alignleft {
      float: left;
      margin: 6px 22px 10px 0;
    }
    p {
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .more-link {
      display: flex;
      justify-content: flex-end;
      a {
        padding: 12px;
        border-radius: 6px;
        border: 1px solid #aaa;
        &:hover {
          background: $color_hover;
        }
      }
    }
  }
  .footer-post-meta {
    margin-top: 30px;
    text-align: right;
  }
}

/* pager
------------------------------------------------- */
.pager {
  display: flex;
  margin-bottom: 40px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fefefe;
  > span {
    flex: 1;
    width: 50%;
  }
  a {
    display: block;
    padding: 1em;
    &:hover {
      background: $color_hover;
      border: none;
    }
  }
  .alignright {
    text-align: right;
  }
}

/* sidebar
------------------------------------------------- */
.sidebar {
  width: 220px;
  .widget {
    margin-bottom: 60px;
    h2 {
      margin-bottom: 10px;
      font-family: 'Josefin Sans', sans-serif;
      font-weight: 600;
      color: $color_anchor;
    }
    ul {
      list-style-position: inside;
      list-style-type: disc;
      li {
        margin-bottom: 10px;
        a {
          padding-left: 4px;
          border-bottom: 1px dotted $color_anchor;
          &:hover {
            padding: 4px;
            background-color: #efefef;
          }
        }
      }
    }
  }
}

/* footer
------------------------------------------------- */
.footer {
  height: 80px;
  padding-top: 20px;
  background: #555;
  color: #fff;
  font-size: 85%;
  text-align: center;
}