カスタマイズの共通エリア、ヘッダーボトムエリアの設定　から変更ね　
NO IMAGE

BlankSlateを利用してカスタマイズ　その1

  • 2018年11月15日
  • 2018年11月16日
  • 未分類
  • 912view
未分類 NO IMAGE

先程の記事の続き。

作業しながら記録。

まずはブランクテーマのBlankSlateの内容を確認して、CSSやJSをすっきりと組み込めるかテスト。

BlankSlate

 

目次

まずは不要なヘッダータグを削除

function.php

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles' );
remove_action('admin_print_styles', 'print_emoji_styles');
remove_action('wp_head','wp_generator');
function remove_cssjs_ver2( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );
remove_action( 'wp_head', 'rest_output_link_wp_head' );

 

次にBootstrap4の公式セットを読み込み。

wp_enqueue_script()とwp_enqueue_style()はまとめてアクションフックに登録

 

//Bootstrap4の JS・CSSファイルを読み込む

function add_files() {
// WordPress提供のjquery.jsを読み込まない
wp_deregister_script('jquery');

// jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.3.1.js', "", "20181109", false);
// サイト共通JS
wp_enqueue_script( 'smart-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ), '20181109', false );
// サイト共通のCSSの読み込み
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/bootstrap.css', "", '20181109' );
}
add_action('wp_enqueue_scripts', 'add_files');

バリデーションを含むページ用意してみる。

もともとバリデーションが動かなかったから……だったが、これで動くか確認。
まずはテンプレートを作り、

Uncaught Error: jQuery.validationEngine rules are not loaded, plz add localization　おお？

/js/jquery.validationEngine-ja.js 読んでなかったからか。
怖いから、languagesフォルダに入れておくか。

グリッドを実装

TODO

検索フォーム

まずはトップページ。

index.phpを複製してfront-page.php を作る。

メニューが邪魔

まずメニューが邪魔なので、トップページは管理バーは下に下げておく。

ヘッダー無駄に３２pxほど隙間があるので、もう面倒なので、

// ツールバー下に表示
function oz_admin_bar_to_the_bottom() {
	

  echo '<style type="text/css">
  #wpadminbar {
    top: auto !important;
    bottom: 0;
  }
  </style>';
	
	}
add_action( 'wp_head', 'oz_admin_bar_to_the_bottom' );

上に変更

 

 

WordPress で使用中のテンプレートファイル名を管理バーに出しておく
Show Current Template

 

 

ヘッダーとフッターメインはそれぞれcontanierに包む。

front-page.php

<?php get_header(); ?>
<section id="content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

ヘッダーを見ると、最後に最後の行に<div id=”container”>とあるfooterまで包んでいるので、これはわかりずらいので、直す。
そして<div id=”wrapper” class=”hfeed”>　このhfeedの意味を確認するがあまり意味がないので、これは削除しておく。

まずはヘッダー

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container-fluid">
	<header id="header" role="banner">

 

そしてindex.php

<?php get_header(); ?>
<div class="container">
	<section id="content" role="main">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php get_template_part( 'entry' ); ?>
	<?php comments_template(); ?>
	<?php endwhile; endif; ?>
	<?php get_template_part( 'nav', 'below' ); ?>
	</section>
    <?php get_sidebar(); ?>
</div><!--/*end container*/-->
	<?php get_footer(); ?>

このblankslateは

<?php get_template_part( ‘entry’ ); ?> でentry.phpを読んでいるのか。

じゃ、トップページに出すカードphpを作ろうかと思うが、わざわざ別のファイルすることはないな。

アイキャッチをＵＲＬを表示

// アイキャッチ画像のURL文字列を出力する
the_post_thumbnail_url( 'medium' );

日付を変更

まずは以下

<?php get_header(); ?>
<div class="container">
<div class="row">
	<div class="col-sm-10">
		<section id="content" role="main">
		<div class="card-columns">		
			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
				<div class="card border-info">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark">	
					<img class="card-img-top" src="<?php the_post_thumbnail_url("medium"); ?>" alt="Card image cap">
					<div class="card-img-overlay">

					</div>	
					<div class="card-body">
					<h2 class="card-title"><?php the_title(); ?></h2>
					<div class="time-show"><b><?php the_time('m'); ?></b>月<b><?php the_time('d'); ?></b>日</div>
					</div>
					</a>
					<div class="card-footer">ああああ</div>	
				</div>
			<?php endwhile; endif; ?>
		</div><!--end card-columns-->	
		<?php get_template_part( 'nav', 'below' ); ?>
		</section>
	</div>
	
	<div class="col-sm-12">
    <?php get_sidebar(); ?>
	</div>
	
	</div><!--/*end row */-->	
</div><!--/*end container*/-->
	<?php get_footer(); ?>

日付のところ

＠https://qiita.com/NoxGit/items/eb0904822c0f0fe97650

.time-show {
color: rgba(255,255,255,1.00);	
float:right;
font-size: 1rem;	
text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;
}
.time-show b {
	font-size: 1.7rem;
}

次に、ヘッダー部分の部分も変更

 

sticky-top　最上部に達すると固定（Sticky top）
fixed-top

高さを変更

navbar高さを変えるより、上に頃を入れるか

bootstrapでnavbar-fixed-topを指定するときはbodyにpaddingが必要


ナビバーが2段にならない。

＠https://stackoverflow.com/questions/42635126/bootstrap-4-navbar-with-2-rows

＠参考URL

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
https://stackoverrun.com/ja/q/11927480

 

【Bootstrap v4】ナビバーを作る

 

https://cccabinet.jpn.org/bootstrap4/utilities/display

 

 

 

 

NO IMAGE
最新情報をチェックしよう！

未分類の最新記事8件

>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

システムの構築・保守運用「　　　」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

THEME DOWNLOAD
CTR IMG