WordPRESS メモ

index.php

<!-- ニュースセクション -->
<?php get_header(); ?>

<h1 class="m1">事例</h1>
<div class="container kizi">
<section class="gr4 clearfix">
<?php if(have_posts()):
while(have_posts()): the_post(); ?>

<div <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<h2><?php the_title(); ?></h2>
<p class="news_img"><?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>
</p>
<p><?php the_excerpt(); ?></p>
</a>
</div>

<?php endwhile; endif; ?>
</section>
</div>

<?php get_footer(); ?>

------

footer.php

<?php wp_footer(); ?>
</body>
</html>

 

------

functions.php

<?php

// 概要の文字数
function length($length) {
return 20;
}

add_filter('excerpt_mblength', 'lenght');

// 概要(抜粋)
function more() {
return '......[ 詳細を読む ]';
}

add_filter('excerpt_more', 'more');

add_theme_support('post-thumbnails');
set_post_thumbnail_size(150,80, true);

// カスタムメニュー
register_nav_menu('sitenav', 'ナビゲーションメニュー');

------

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<title>
<?php wp_title('|', true, 'right'); ?>
<?php bloginfo('name'); ?>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

 


<header class="container menu">

<?php wp_nav_menu(array(
'theme_location' => 'sitenav', #ロケーション名
'container' => 'nav', # HTML タグ
'container_class' => 'mainmenu', # クラス名
'container_id' => 'mainid' #id 名
)); ?>

</header>

<!--スマホ menu 上-->
<p class="btn_s">
<i class="fa fa-bars" id="show"></i>
</p>
<div id="menu_top">
<i class="fa fa-times" id="hide"></i>
<ul>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
<li>MENU</li>
</ul>
</div>

<!--スマホ menu 上 終了-->

-----

style.css

@charset "utf-8";

/*-
共通
*/
body {font-size: 14px;font-family:Arial,Verdana;}
a {text-decoration: none;}
p{padding-bottom: 14px; margin: 0; line-height: 1.8;}

/* コンテンツ横幅 */
.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

 

/* h1 見出し */
.m1 {padding-top:.5;padding-bottom: .5; border-top: double 3px #ccc;
border-bottom: double 3px #ccc;text-align:center;}

@media(max-width:740px) {
.m1{margin-top: 2em;}
}

/*--- menu ---*/
.mainmenu > ul {list-style:none;margin:0;padding:0;}
.mainmenu > ul >li{float:left;}
.mainmenu > ul >li a{display: block; padding: 1em 0.55em;border-right: 1px solid #888;}
#menu_top{display: none;}
.btn_s {display: none;}
#show, #hide{display: none;}


@media (max-width: 740px){
.mainmenu{display: none;}
#menu_top {position: absolute;top:0;background: #4c81e9;color:#fff;padding: 8px;
box-sizing: border-box;min-width: 100%;height: 160px;}
.btn_s{display: block;margin: 1em 0 1em 0;}
.menu-open-top {top:160px;transition: 0.4s;}
#show, #hide {float: right;cursor: pointer;display:block;}
.fa-bars{font-size: 4em; color:#366666;display: block;}
}

/*-- 記事投稿ページ TOP news--*/

@media(max-width: 740px) {
.container.kizi{width: 90%;margin: 0 auto;}
.container.kizi h2,p{text-align: center;}
.gr4 > div {border-bottom: 0.2em solid #333;}
}

/* -----------------------------------------------------------
レイアウト グリッドレイアウト
----------------------------------------------------------- */
.gr2>*,.gr3>*,.gr4>*,.gr5>*,.gr6>*{
float:left; margin:0 0 1em; position:relative; box-sizing:border-box;
}
.gr2>* img,.gr3>* img,.gr4>* img,.gr5>* img,.gr6>* img{ margin-bottom:1em;}

.gr2>*{width:48%; margin-right:4%; font-size:15px;}
/*タブレット以上*/@media(min-width:741px){/*余裕のあるマージン*/.gr2.margin>*{width:46%; margin-right:8%; margin-bottom:2em;}}
.gr2>*:nth-child(2n){margin-right:0;}
.gr2>*:nth-child(2n+1){ clear:both;}

.gr3>*{width:31.3%; margin-right:3%; font-size:14px;}
/*タブレット以上*/@media(min-width:741px){/*余裕のあるマージン*/.gr3.margin>*{width:28%; margin-right:8%; margin-bottom:2em;}}
.gr3>*:nth-child(3n){margin-right:0;}
.gr3>*:nth-child(3n+1){ clear:both;}

.gr4>*{width:23.5%; margin-right:2%; font-size:13px;}
.gr4>*:nth-child(4n){margin-right:0;}
.gr4>*:nth-child(4n+1){ clear:both;}

.gr5>*{width:18.4%; margin-right:2%; font-size:12px;}
.gr5>*:nth-child(5n){margin-right:0;}
.gr5>*:nth-child(5n+1){ clear:both;}

.gr6>*{width:15%; margin-right:2%; font-size:11px;}
.gr6>*:nth-child(6n){margin-right:0;}
.gr6>*:nth-child(6n+1){ clear:both;}

/*タブレット*/
@media(max-width:1024px){
/*+.verticalでタブレットでも縦に*/
.gr2.vertical>*,.gr3.vertical>*,.gr4.vertical>*,.gr5.vertical>*,.gr6.vertical>*{width:auto; float:none; margin:0 0 2em;}
}

/*スマホ*/
@media(max-width:740px){
.gr2>*,.gr3>*,.gr4>*,.gr5>*,.gr6>*{width:auto; float:none; margin:0 0 2em; font-size:14px;}

/*+.holdでSPでも固定*/
.gr2.hold>*{ width:48%; float:left; margin:0 4% 1em 0; font-size:10px;}.gr2.hold>*:nth-child(2n){ margin-right:0;}.gr2.hold>*:nth-child(2n+1){ clear:both;}
.gr3.hold>*{ width:31.3%; float:left; margin:0 3% 1em 0; font-size:9px;}.gr3.hold>*:nth-child(3n){ margin-right:0;}.gr3.hold>*:nth-child(3n+1){ clear:both;}
.gr4.hold>*{ width:23.5%; float:left; margin:0 2% 1em 0; font-size:8px;}.gr4.hold>*:nth-child(4n){ margin-right:0;}.gr4.hold>*:nth-child(4n+1){ clear:both;}
.gr5.hold>*{ width:18.4%; float:left; margin:0 2% 1em 0; font-size:7px;}.gr5.hold>*:nth-child(5n){ margin-right:0;}.gr5.hold>*:nth-child(5n+1){ clear:both;}
.gr6.hold>*{ width:15%; float:left; margin:0 2% 1em 0; font-size:6px;}.gr6.hold>*:nth-child(6n){ margin-right:0;}.gr6.hold>*:nth-child(6n+1){ clear:both;}
}

/* -----------------------------------------------------------
グリッドと.navの複合
----------------------------------------------------------- */
.gr2.nav>*,.gr3.nav>*,.gr4.nav>*,.gr5.nav>*,.gr6.nav>*{ margin-bottom:0;}

/* -----------------------------------------------------------
.gr3 から 2へ
----------------------------------------------------------- */
.gr3.to2.nav>* h4{ font-size:14px;}
.gr3.to2.nav>* p{ font-size:10px;}
/*スマホ*/
@media(max-width:740px){
/*2カラムへ*/
.gr3.to2>*{width:48%; margin-right:4%;}
.gr3.to2>*:nth-child(2n){margin-right:0;}
.gr3.to2>*:nth-child(2n+1){ clear:both; margin-right:4%;}
.gr3.to2>*:nth-child(3n+1){ clear:none;}
}
/* -----------------------------------------------------------
.gr4 から 2へ
----------------------------------------------------------- */
.gr4.to2.nav>* h4{ font-size:14px;}
.gr4.to2.nav>* p{ font-size:10px;}
/*スマホ*/
@media(max-width:740px){
/*2カラムへ*/
.gr4.to2>*{width:48%; margin-right:4%;}
.gr4.to2>*:nth-child(2n){margin-right:0;}
.gr4.to2>*:nth-child(2n+1){ clear:both; margin-right:4%;}
.gr4.to2>*:nth-child(4n+1){ clear:none;}
}

clearfix{min-height: 1px;}.clear{clear:both;}