オリジナルのtheme(テーマ)を作る19:コメントフォームを追加する


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

index.phpにコメントフォームを組み込むテンプレートタグを追加します。

<?php comments_template(); ?>追加する場所は、pagerの下、左のカラムの一番下の部分です。

<div class="row">
	<div class="col-md-9">
	<?php if(have_posts()): while(have_posts()): the_post(); ?>
		<article>
		<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<time><?php the_date('Y/m/d (D)'); ?><?php the_time(); ?></time>
		<div class="well well-lg">
			<div class="categorybtn">
			<?php the_category(); ?>
			</div>
			<!--//categorybtn -->
			<?php the_content(); ?>
		</div>
		<!--//well well-lg --> 
		</article>
		<!--//article -->
                
                <?php if(is_single()): ?>
                <nav>
                <ul class="pager">
                    <li class="previous">
			<?php if (get_previous_post()):?>
			<?php previous_post_link('%link','%title',TRUE); ?>
			<?php endif; ?>
                    </li>
                    <li class="next">
			<?php if (get_next_post()):?>
			<?php next_post_link('%link','%title',TRUE); ?>
			<?php endif; ?>
                    </li>
                </ul>
                <!--//pager --> 
                </nav>
                <!--//nav -->
                <?php endif; ?>

                <?php endwhile; endif; ?>

                <?php if(is_home() or is_archive()): ?>
                <nav>
                    <ul class="pager">
                       <li class="previous"><?php next_posts_link('<i class="fa fa-angle-left"></i> Older'); ?></li>
                       <li class="next"><?php previous_posts_link('Newer <i class="fa fa-angle-right"></i>'); ?></li>
                    </ul>
                    <!--//pager -->
                </nav>
                <!--//nav -->
                <?php endif; ?>
		
		<?php comments_template(); ?>
	</div>
	<!--//col -->
	<div class="col-md-3">
            <ul class="list-group">
		<?php dynamic_sidebar('right_sidebar'); ?>
            </ul>
	</div>
	<!--//col -->
</div>
<!--//row -->

次に、空のcomments.phpを用意して、FTPでアップロードします。
外観-テーマの編集画面から、comments.phpを開いて以下の記述をします。

<div id="comments">
<?php comment_form(); ?>
</div>

とりあえずこれだけでコメントフォーム自体は表示されます。

comments.php

<?php
/**
 * Template Name: comments page
 *
 */

// Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if ( post_password_required() ) { ?>

<p class="nocomments">
    <?php _e('This post is password protected. Enter the password to view comments.'); ?>
</p>
<?php
	return;
	}
?>

<!-- You can start editing here. -->
<div id="comments" class="panel panel-default">
<?php if ( have_comments() ) : ?>
	<div class="panel-heading one">
        <?php
		if ( 1 == get_comments_number() ) {
		/* translators: %s: post title */
		printf( __( 'One response to %s' ),  '&#8220;' . get_the_title() . '&#8221;' );
		} else {
		/* translators: 1: number of comments, 2: post title */
		printf( _n( '%1$s response to %2$s', '%1$s responses to %2$s', get_comments_number() ),
		number_format_i18n( get_comments_number() ),  '&#8220;' . get_the_title() . '&#8221;' );
		}
	?>
	</div>
	<!--//panel-heading -->
	<div class="panel-body">
  	<ul class="media-list">
            <?php wp_list_comments(); ?>
	</ul>
	<nav>
            <ul class="pager">
                <li class="previous">
                    <?php previous_comments_link() ?>
                </li>
                <li class="next">
                    <?php next_comments_link() ?>
                </li>
            </ul>
        </nav>
	</div>
	<!--//panel-body -->
    
	<?php else : // this is displayed if there are no comments so far ?>
		<?php if ( comments_open() ) : ?>
        	<!-- If comments are open, but there are no comments. -->
        	<?php else : // comments are closed ?>
        	<!-- If comments are closed. -->
		<div class="panel-body">
        		<p class="nocomments"><?php _e('Comments are closed.'); ?></p>
		</div>
		<!--//panel-body -->
        <?php endif; ?>
<?php endif; ?>
    
<?php if ( comments_open() ) : ?>
    	<div id="respond" class="panel-footer">
    	<h4>
        <?php comment_form_title( __('Leave a Reply'), __('Leave a Reply to %s' ) ); ?>
        </h4>
    
	<div id="cancel-comment-reply"><small>
		<?php cancel_comment_reply_link() ?>
        	</small></div>
	<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
	<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() )); ?></p>
        
	<?php else : ?>
	<form action="<?php echo site_url(); ?>/wp-comments-post.php" method="post" id="commentform" class="form-horizontal">
		<?php if ( is_user_logged_in() ) : ?>
		<p>
                <?php /* translators: %s: user profile link  */
printf( __( 'Logged in as %s.' ), sprintf( '<a href="%1$s">%2$s</a>', get_edit_user_link(), $user_identity ) ); ?>
                <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="<?php esc_attr_e( 'Log out of this account' ); ?>">
                <?php _e( 'Log out &raquo;' ); ?>
                </a></p>
	<?php else : ?>
	<div class="form-group">
		<label for="author" class="col-sm-3 control-label"><small>
                    <?php _e('Name'); ?>
                    <?php if ($req) _e('(required)'); ?>
                    </small></label>
		<div class="col-sm-9">
                    <input type="text" class="form-control" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
		</div>
	</div>
	<!--//form-group -->
	<div class="form-group">
		<label for="email" class="col-sm-3 control-label"><small>
                    <?php _e('Mail (will not be published)'); ?>
                    <?php if ($req) _e('(required)'); ?>
                    </small></label>
		<div class="col-sm-9">
                    <input type="text" class="form-control" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
		</div>
	</div>
	<!--//form-group -->
	<div class="form-group">
		<label for="url" class="col-sm-3 control-label"><small>
                    <?php _e('Website'); ?>
                    </small></label>
		<div class="col-sm-9">
                    <input type="text" class="form-control" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" tabindex="3" />
		</div>
	</div>
	<!--//form-group -->
	<?php endif; ?>
	<div class="form-group">
		<label for="comment" class="col-sm-3 control-label"><small>
                    <?php _e('Comment'); ?>
                    </small></label>
		<div class="col-sm-9">
                    <textarea class="form-control" name="comment" id="comment" rows="10" tabindex="4"></textarea>
		</div>
	</div>
	<!--//form-group -->
	<div class="form-group">
		<div class="col-sm-offset-3 col-sm-9">
                    <input name="submit" class="btn btn-warning" type="submit" id="submit" tabindex="5" value="<?php esc_attr_e('Submit Comment'); ?>" />
		</div>
	</div>
	<!--//form-group -->
	<?php comment_id_fields(); ?>
		<?php
		/** This filter is documented in wp-includes/comment-template.php */
		do_action( 'comment_form', $post->ID );
	?>
        </form>
        <?php endif; // If registration required and not logged in ?>
	</div>
	<!--//panel-footer -->
<?php endif; // if you delete this the sky will fall on your head ?>
</div>
<!--//panel panel-default -->

コメントがあれば出力します

<?php if(have_comments()): ?> ~ <?php endif; ?>

コメントを出力します

<?php wp_list_comments(); ?>

一応、bootstrapになっています。
が、このままでは見た目がオカシイので(笑)ちょっとcssをいじらなければ・・(^_^;)
ということで以下にcssを。

style.css

/*
---------------------*/
#comments {
	color: #222;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/*
---------------------*/
.form-control {
    border-radius: 0;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #F90;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,204,0,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,204,0,.6);
}
.btn {
    white-space: nowrap;
    border: none;
    border-radius: 0;
}

/*
------------------------*/
.media-list .children {
	list-style: none;
	padding-top: 15px;
	border-top: 1px dotted #DDD;
}
.media-list>li {
	overflow: hidden;
	zoom: 1;
	margin-bottom: 20px;
	border-bottom: 1px solid #DDD;
}
.media-list li .vcard {
	display: table-cell;
	vertical-align: top;
	padding-right: 20px;
	float: left;
}
.media-list li .vcard img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 4px;
}
.media-list li p {
	display: table-cell;
	vertical-align: top;
	width: 10000px;
	overflow: hidden;
	zoom: 1;
}
.comment-body {
	position: relative;
	overflow: hidden;
	zoom: 1;
	padding-bottom: 15px;
}
.comment-meta {
	display: inline-block;
	position: absolute;
	font-size: 11px;
	bottom: 10px;
	right: 0;
}
.reply {
	display: inline-block;
	position: absolute;
	font-size: 0.857em;
	top: 0;
	right: 0;
}
.fn, .says {
	font-size: 0.857em;
	font-style: normal;
}

.media-list li a:hover,
article .well a:hover {
    color: #AAA;
}

ちょっとまだ不十分かな?(^_^;)

オリジナルのtheme(テーマ)を作る18:グローバルメニューを作る


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

トップページ専用ページを作ってみたものの、現状ではどこのページにも行けないので(^_^;)
グローバルメニューを作ります。

function.php

//カスタムメニュー機能を有効にする
register_nav_menus(array('navigation' => ' NavigationBar '));

カスタムメニューを有効にしておきます。

メニューを複数(日本語でもOKです)

//メニュー有効化
register_nav_menus(array(
	'main-menu'	=> 'メインメニュー',
	'sub-menu'	=> 'サブメニュー'
));

header.php

<header id="header">
    <nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
        <h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>
        </div>
        <!--//navbar-header -->
        <div class="collapse navbar-collapse" id="globalmenu">
            <?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
        </div>
        <!-- //collapse navbar-collapse -->
    </div>
    <!--//container -->
    </nav>
    <!--//nav -->
</header>
<!--//#header -->

header.phpに書いてあったメニュー部分(ul li)を削除して、下記のテンプレートタグに書き換えます。

<?php wp_nav_menu(array('theme_location' => 'navigation')); ?>

自動的に、ul li タグが書き出されるので、style.cssで見た目を整えましょうー。
bootstrapを使っているのですが、ulとliが勝手に・・となってしまうので
cssの書き換えが面倒だよーという方はこの部分だけbootstrapでなくてもいいんではないかと。

とりあえずここではbootstrapのまま、cssを書き換えました。

/* #globalmenu
----------------------------*/
#globalmenu {
}
#globalmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#globalmenu ul>li {
	float: left;
	position: relative;
	display: block;
}
#globalmenu ul>li>a {
	color: #AAA;
	height: 100px;
	border-left: 1px #000 solid;
	border-right: 1px #444 solid;
	padding: 25px;
	position: relative;
	display: block;
	line-height: 20px;
}
#globalmenu ul>li:first-child {
	border-left: 1px #444 solid;
}
#globalmenu ul>li:last-child {
	border-right: 1px #000 solid;
}
#globalmenu ul>li>a:focus,
#globalmenu ul>li>a:hover {
	background-color: transparent;
}
@media screen and (min-width: 768px) and (max-width: 1199px){
	#globalmenu ul>li>a {
		height: auto;
		padding: 10px 15px;
	}
}
@media screen and (max-width: 767px){
	#globalmenu ul>li>a {
		height: auto;
		border-left: none;
		border-bottom: 1px solid #AAA;
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child>a {
		border-right: none;
	}
	#globalmenu ul>li {
		-webkit-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		-moz-box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
		box-shadow: inset -1px -1px 0px 0px rgba(0,0,0,1);
	}
	#globalmenu ul>li>a small {
		display: inline-block;
		text-align: left;
		margin-left: 15px;
	}
	#globalmenu ul>li>a {
		padding: 10px 15px;
	}
	#globalmenu ul>li:last-child {
		border-right: none;
	}
	#globalmenu ul>li {
		float: none;
		width: 1%;
		display: table-cell;
	}
}
@media screen and (min-width: 768px){
	#globalmenu ul {
		float: right!important;
		margin-right: -15px;
	}
}

ちなみに、ul liの入れ子になった場合についての考慮はしてません。
※項目を入れ子にしなければいいだけw
項目を入れ子にしたい場合は、bootstrapのtoggleを入れる必要がでてくるので
その場合はbootstrapではなく、cssのみで入れ子のメニューを作るようにするといいかなと思います。

スマホでの見え方も考慮してないので、そのへんは考えなければ。
項目名の下にスラッグ等の英語表記を入れたかったんですが、ちょっと厳しかったなー。
もうちょっと試行錯誤が必要・・。

挿入する項目は、左側の外観-メニューから項目を選んでください。
gmenu
これで、無事、メニューが出来たかと思います(^^)

オリジナルのtheme(テーマ)を作る17:トップページだけレイアウトを変える


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/tomisan/www/info/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

ブログのみだとトップページだけ違うレイアウトというのは必要ないかもですが、
色んなページが含まれるwebサイトの場合はトップページだけレイアウトが違ったりしますね。
トップページだけ大きな画像を表示させたり。

ということで、トップページを作ろうー。

front-page.phpトップページのファイルはhome.php、またはfront-page.phpというファイル名、もしくはほかの名前でもOK。
とりあえずここでは、font-page.phpという名前のファイルを空のままFTPでアップロードします。

外観-テーマの編集から、front-page.phpを開きます。
真っ白なままですが、ここにテンプレート名を記述します。

<?php
/*
Template Name: フロントページ
*/
?>

分かりやすい名前であれば何でもいいですが、フロントページと書きました。

次に、page.phpの中身を全部コピーして、front-page.phpに貼り付けます。
※上で記述したテンプレート名の下に貼り付けて更新します。

固定ページ-新規追加画面で、トップページ用のタイトルを書いて更新します。
このタイトルは分かり易ければなんでもいいと思います。
TOPとかHOMEとかのタイトルだと分かりやすいかもですね。
※テンプレートは先ほど付けたテンプレート名を選びます。

設定-表示設定の画面で、フロントページの設定を固定ページにして、プルダウンからページを選択します。
さきほど固定ページに付けたタイトルを選択します。

表示設定

この時点でサイトを表示させると投稿のタイトルが出ているので
これらの要らないものは、外観-テーマの編集画面に行ってfront-page.phpの中からタイトル部分を削除します。

また、トップページに必要なものを追加していきます。

<?php
/*
Template Name: front page
*/
?>

<?php get_header(); ?>

<main id="main" role="main">
<div class="container-fluid">
	<div class="custom-header">
		<div class="container">
		<div class="frontnewsBox">
			<ul>
			<?php dynamic_sidebar('header_area'); ?>
			</ul>
		</div>
		<!--//frontnewsBox -->
		</div>
		<!--//container -->
	</div>
	<!--//custom-header -->
</div>
<!--//container-fluid -->
	
<div class="container">
	<section>
	<div class="row">
		<div class="col-xs-12">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('top_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
	
	<section>
	<div class="row">
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-2'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-3'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
		<div class="col-sm-3">
        	<div class="contentsBox">
			<ul>
			<?php dynamic_sidebar('center_area-4'); ?>
			</ul>
		</div>
        	<!--//contentsBox -->
		</div>
		<!--//col -->
	</div>
	<!--//row --> 
	</section>
	<!--//section-->
</div>
<!--//container --> 
</main>
<!--//#main -->
    
<?php get_footer(); ?>

ところどころに、sidebarのウィジェット入りになってます。
このサイトのトップページは複数のテキストウィジェットを配置して表示しています。
基本的には、ウィジェットでphpを使うことはできませんが、phpが使えるようになるプラグインもあるようです。