WordPress オリジナルテーマ 【Code Tips minimum Theme + Style】

  Code Tips minimum Theme

Code Tips minimum Theme + Style

オリジナルテーマ「Code Tips minimum Theme」はスタイルシートによるデザイン・装飾をしていませんでした。

これに「bootstrap」を使って簡単なデザインを加えてみました。

 

追記:2016.12. GitHub で公開しました。
https://github.com/ctips/ctips-minTheme-msb
 Clone or download  からダウンロードできます。

 

 

404.php
<?php get_header(); ?>
<div id="main" class="col-md-12">
 
  <article id="page-not-found" class="post">
    <header class="entry-header">
      <h2 class="entry-title">404 Page Not Found</h2>
    </header>
 
    <div class="entry-content">
      <h3>申し訳ございません、お探しのページは見つかりませんでした。</h3>
      <p>
        入力したURLが誤っているか、URLが変更・削除された可能性があります。
        <br>
        URLをご確認の上、再読み込みするかトップページへお戻りください。
        またはサイト内検索をご活用ください。
      </p>
    </div>
 
    <footer class="entry-footer">
      <?php get_search_form(); ?>
    </footer>
  </article>

</div><!-- END main -->
<?php get_footer(); ?>

 

footer.php
  <div class="clearfix"></div>
  </div><!-- END row -->
</div><!-- END container -->
<footer class="site-footer">
<?php
  $last_year = '';
  $last_year_query = new WP_Query();
  $last_year_param = array(
    'posts_per_page' => '1',
  );
  $last_year_query->query($last_year_param);
  if ($last_year_query->have_posts()) : while ($last_year_query->have_posts()) : $last_year_query->the_post();
    $last_year = get_the_date('Y');
  endwhile;
  endif;
  wp_reset_postdata();

  $start_year = '';
  $start_year_query = new WP_Query();
  $start_year_param = array(
    'posts_per_page' => '1',
    'orderby' => 'date',
    'order' => 'ASC'
  );
 $start_year_query->query($start_year_param);
 if ($start_year_query->have_posts()) : while ($start_year_query->have_posts()) : $start_year_query->the_post();
 if (get_the_date('Y') != $last_year) {
 $start_year = get_the_date('Y') . ' - ';
 }
 endwhile;
 endif;
 wp_reset_postdata();
?>
  <p class="copy">
    &copy; <?php bloginfo('name'); echo '&nbsp;' . $start_year . $last_year; ?>.
  </p>
</footer>
<?php wp_footer(); ?>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

 

functions.php
<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');
// jQuery
if (!is_admin()) {
  function add_script() {
    wp_enqueue_script('jquery');
  }
  add_action('wp_enqueue_scripts', 'add_script');
}
// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action('widgets_init', 'my_widgets_init');
// custom menu
function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');
// custom background
$background_param = array(
  'default-color' => 'f5f5f5'
);
add_theme_support( 'custom-background', $background_param );
// custom header
$header_params = array(
  'width' => 1140,
  'height' => 250,
  'header-text' => false
  );
add_theme_support( 'custom-header', $header_params );
// thumbnails
add_theme_support('post-thumbnails');
?>

 

header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="<?php bloginfo('description'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <?php wp_head(); ?>
  <script>
    jQuery(function($) {
      $("#header-toggle-btn").on("click", function() {
        $("header>nav").slideToggle();
        $(this).toggleClass("active");
      });
    });
  </script>
</head>
<body <?php body_class(); ?>>
  <div class="wrap container">
    <header>
      <div id="header-top">
        <div class="site-title">
          <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
        </div>
        <div id="header-toggle-btn">
          <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
        </div>
      </div>
      <?php wp_nav_menu(array('container' => 'nav')); ?>
      <?php if (get_header_image()) : ?>
      <div class="header-image">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>"></a>
      </div>
      <?php endif; ?>
    </header>
    <div class="row">

 

home.php
<?php get_header(); ?>
<div id="main" class="col-md-8">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
    </header>
 
    <?php if(has_post_thumbnail()) : ?>
    <div class="thmbnail-home"><?php the_post_thumbnail('large'); ?></div>
    <?php endif; ?>
 
    <div class="entry-content">
      <?php the_content('続きを読む…'); ?>
    </div>
 
    <footer class="entry-footer">
      <span class="date"><?php echo get_the_date(); ?></span>
    </footer>
  </article>

 <?php endwhile; ?>
 
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
 
  <?php endif; ?>
</div><!-- END main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

index.php
<?php get_header(); ?>
<div id="main" class="col-md-8">
 
  <?php if (is_category()) : ?>
  <?php
    $category = get_the_category();
    $cat_name = $category[0]->cat_name;
    echo '<h2>' . $cat_name . '</h2>';
  ?>

  <?php elseif (is_tag()) : ?>
  <h2><?php single_tag_title('TAG : '); ?></h2>

  <?php elseif (is_search()) : ?>
  <h2>SEARCH KEY WORDS : <?php the_search_query() ?></h2>
  <?php endif ?>
 
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '">', '</a></h4>' ); ?>
    </header>
 
    <?php if(has_post_thumbnail()) : ?>
    <div class="thmbnail-home"><?php the_post_thumbnail('large'); ?></div>
    <?php endif; ?>
 
    <footer class="entry-footer">
      <span class="date"><?php echo get_the_date(); ?></span>
    </footer>
  </article>

  <?php endwhile; ?>
 
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
 
  <?php endif; ?>
</div><!-- END main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

sidebar.php
<?php if(is_active_sidebar('sidebar-1')) : ?>
<div id="side" class="col-md-4">
  <ul>
    <?php dynamic_sidebar('sidebar-1'); ?>
  </ul>
</div>
<?php endif; ?>

 

single.php
<?php get_header(); ?>
<div id="main" class="col-md-8">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
      <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
      <div class="entry-meta">
        <span class="category"><?php the_category(' , ') ?></span> | <span class="entry-date date"><?php echo get_the_date(); ?></span>
      </div>
    </header>
 
    <?php if(has_post_thumbnail()) : ?>
    <div class="thmbnail-single"><?php the_post_thumbnail('large'); ?></div>
    <?php endif; ?>
 
    <div class="entry-content">
      <?php the_content(); ?>
    </div>
 
    <footer class="entry-footer">
      <div class="entry-meta">
        <span class="category"><?php the_category(' , ') ?></span> | <time class="entry-date date updated" datetime="<?php the_time('c') ;?>"><?php echo get_the_date(); ?></time> | <span class="post-author vcard author"><?php the_author_posts_link(); ?></span>
      </div>
    </footer>
  </article>
 
  <ul class="pager">
    <li class="previous"><?php previous_post_link('%link','&lt; PREVIOUS'); ?></li>
    <li class="next"><?php next_post_link('%link','NEXT &gt;'); ?></li>
  </ul>

  <?php endwhile; ?>
  <?php endif; ?>
</div><!-- END main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

style.css
/*
Theme Name: ctips-minTheme-msb
Theme URI: http://ctips.slackhack.net/wordpress/ctips-mintheme/
Author: code tips
Author URI: http://ctips.slackhack.net
Description: code tips minimum Theme. minimum & minimum style & bootstrap
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
body {
  background-color: #f5f5f5;
  font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smooting: grayscale;
}

.wrap {
  background-color: #fff;
  margin-top: 30px;
  padding-bottom: 15px;
}
/* header */
header #header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
header h1 {
  font-size: 1.4em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#header-toggle-btn {
  font-size: 1.2em;
  cursor: pointer;
}
#header-toggle-btn:before {
  content: " MENU";
}
#header-toggle-btn.active:before {
  content: " CLOSE";
}
#header-toggle-btn .glyphicon {
  transition: transform .3s;
}
#header-toggle-btn.active .glyphicon {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
header > nav {
  display: none;
}
ul.menu {
  display: flex;
}
ul.menu, ul.sub-menu, ul.menu > li, ul.sub-menu > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.menu > li > a {
  display: block;
  padding: 15px 15px 5px 15px;
}
ul.sub-menu > li > a {
  display: block;
  font-size: 0.9em;
  padding: 3px 3px 3px 20px;
}
.header-image {
  margin: 15px auto;
}
.header-image img {
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
}

/* main */
article {
  border-bottom: solid 1px #bdbdbd;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
header.entry-header {
  margin-bottom: 30px;
}
footer.entry-footer {
  margin-top: 30px;
}
.thmbnail-home {
  height: 250px;
  margin: 15px auto;
  overflow: hidden;
  position: relative;
  width: 100%; 
}
.thmbnail-home img {
  height: auto;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: auto;
}
.thmbnail-single {
  text-align: center;
  margin: 15px auto;
}
.thmbnail-single img {
  height: auto;
  max-width: 100%; 
}
.entry-meta {
  text-align: right;
}
.pagination {
  clear: both;
  display: block;
  margin: 30px auto;
  text-align: center;
}
.pagination .screen-reader-text {
  font-size: 0.8em;
}
.nav-links {
  display: flex;
  justify-content: center;
}
.page-numbers {
  display: block;
  width: 38px;
}

/* side */
#side ul {
  margin: 0;
  padding: 0;
}
#side ul li {
  list-style: none;
}
li.widget {
  margin: 0px 0px 20px 0px;
}
li.widget .widgettitle {
  border-bottom: solid 1px #333;
  font-size: 1.2em;
  line-height: 1.6em;
  margin: 5px 0px 5px 0px;
  padding: 0px 0px 5px 0px;
}
li.widget li {
  border-bottom: dotted 1px #e0e0e0;
  line-height: 1.4em;
  padding: 10px 0px 10px 5px;
}
ul.children li {
  border-bottom: none;
  border-left: solid 1px #e0e0e0;
  margin: 0px 0px 0px 8px;
  padding: 5px 0px 5px 10px;
}
.search-label {
  margin: 0px 0px 0px 0px;
}
table#wp-calendar {
  width: 100%;
}
table#wp-calendar th,
table#wp-calendar td {
  text-align: center;
}
/* site-footer */
.site-footer {
  padding: 30px;
  text-align: center;
}
/* width < 479px */
@media screen and (max-width: 479px) {
  ul.menu {
    display: block;
  }
  .page-numbers {
    width: 26px;
  }
}
@media print {
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}

 

Code Tips minimum Theme の記事一覧