見出し画像

ミニマリストのためのWordPressテーマ[minima_mkp]開発編

ムジン #IT業務改善＆ネットショップ運営改善やってます

noteリンク：ミニマリストのためのWordPressテーマ[minima_mkp]で、ネットショップ運営者や新規ネット起業者に伝えたい思いがあります

WordPressで作るブログの問題点

ウェブデザインを発注するとついてくる、無駄な装飾と機能。

ウェブ制作会社やウェブデザイナーさんが納品したものが、売上効果がない上に、そのカスタマイズや修正に手間取るから、私に依頼がきてしまう。

そこで、LP状にWordPressを更新できればよいと考えました。

ミニマリストのためのWordPressテーマ[minima_mkp]参考画像

参考画像をクリック・タップで、実際のWordPressテーマ[minima_mkp]を適用したWebサイト・ホームページをご覧いただけます。

_minima_mkp_ミニマリストのためのミニマルなWordPressテーマ

WordPressのLP化の利点

ユーザーに伝えたいことは簡潔にまとめたほうがいい。
SEO観点からも、それができてからの長文流し込み。

売上UPには、画像での訴求力が大事なので、画像がいっぱいに見られればいい。

文言の編集が簡単であってほしい。
レイアウトの組み換えは、文章の上下移動のみですむ。

機能が制限され、WordPressの扱い方を教える手間が省けるということは、ユーザーも扱いやすい。

必要最小限かつ、投稿逆順の利用用途

LP制作で使いたかったのです。

投稿の過去のものが一番上に。

最新投稿が一番下に。

LP、作れますよね。

実際のテーマファイルの設計

多少、端折っていますが、だいたいこんな感じで制作しました。

難しいプログラミング知識はいりませんので、WordPressテーマを初めて自作される方には、いい例でも悪い例でも、ご参考になさってください。

style.cssを作成

/*
Theme Name: minima_mkp
Author: MKP.LLC
Description: Bootstrap Blog template converted to WordPress minimalist
Version: 0.0.1
Tags: bootstrap
*/

テーマの管理_‹_test_—_WordPress

index.phpを追加

これで上記エラーは出ない。

BootstrapCDN

ベタなCSSでデザインできるように、Bootstrapを使用。

CDN（コンテンツデリバリネットワーク）というのは、自分のサーバにファイルがなくても、他のサーバに設置してあるファイルを読み込んで使用できる仕組みです。
そういったいろんな場所から、いろんな人がファイルを読み込んでも、ファイル配信が最適化されていて、スムーズにファイルが読み込まれます。
※といううろ覚えだけで書いてるけど、大丈夫かな。

これならテーマファイルフォルダ内に、ファイルが少なくて済む。

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

今の所、index.phpの中身、これだけ。

利用者：ユーザー用CSS

<link href="<?php echo get_bloginfo('template_directory'); ?>/css/user.css" rel="stylesheet">

CSSフォルダ作っておきました。

この中のCSSに、お好きなCSS書いていただく形。

HTML部分：使用言語

<!DOCTYPE html>
<html lang="ja">

日本語とブラウザに明示してしまいます。

多言語の場合も、日本語標準でいくか、外国語標準でいくかは、ここから変えてください。

外国語サイトを構築することも、年に数回ありますが、デフォルトを日本語にしました。

HTML部分：ヘッダー

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="サイトの説明文">
<meta name="author" content="あなたの名前">

<meta charset="utf-8">
文字コード：utf-8

<meta name="viewport" content="width=device-width, initial-scale=1">
ブラウザの幅に合わせる。要素をこの幅に拡大縮小。

edgeの互換性モードは入れない。

メタキーワードを入れない理由

本文中のタグやカテゴリ、本文の強調などで賄う。

header.phpの状態

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>サイトタイトル</title>
 <meta name="description" content="サイトの説明文">
 <meta name="author" content="あなたの名前">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="<?php echo get_bloginfo('template_directory'); ?>/css/user.css" rel="stylesheet">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<?php wp_head(); ?>
</head>
<body>

これを共通のヘッダーにしておく。

index.phpファイルをコピーし、header.phpにリネーム。

上記のように編集した。

<?php wp_head(); ?>
plugin対応も関係するだろうと挿入。
※迷った点

footer.phpの状態

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

サイドバー

PCサイトより、スマートフォン閲覧をイメージしているので、サイドバーはなし。

基本的に私が制作するウェブサイト（ホームページ）というものには、サイドバーがないので、この癖で制作物がバレてしまうことがある。

index.phpに各種ヘッダー・フッター、コンテンツ表示部を出す

<?php get_header(); ?>
	<div class="row">
		<div class="col-sm-12">
			<?php get_template_part( 'content', get_post_format() ); ?>
		</div> <!-- endcol -->
	</div> <!-- endrow -->
<?php get_footer(); ?>

content.php

記事を表示する部分。

<div class="post">
 <div class="entry-content">
   <h1 class="post-title"><?php the_title(); ?></h1>
   <div class="content">
 	   <?php the_content(); ?>
   </div>
 </div><!-- .entry-content -->
</div><!-- .post-inner -->

著者名や日付は不要と判断した。
理由は作成者は、ヘッダー上で。作成日はRSSなどの方に踏まえるか、別の表現にすることにして、見た目の情報を減らした。
いつ書いたか、いつ編集したかは、本文中に書けばいいと判断。

index.phpに<div class="container">を挿入

<?php get_header(); ?>
<main>
<div class="container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="row">
		<div class="col-sm-12">
			<?php get_template_part( 'content', get_post_format() ); ?>
		</div> <!-- endcol -->
	</div> <!-- endrow -->
<?php endwhile; endif; ?>
</div><!-- #container -->
</main><!-- #site-content -->
<?php get_footer(); ?>

bootstrapのサンプルを見たまま。

これで表示内容が中央に。

サイトタイトル

function.php X functions.php

アイキャッチが有効にならないので5分ぼけっとしてしまいました。
sがなかったです。

<?php
function minima_mkp_theme() {
 add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'minima_mkp_theme' );

記事のループ時に、アイキャッチを然るべき形で出力します。

アイキャッチ画像を出力

<div class="post">
 <div class="entry-content">

   <?php if (has_post_thumbnail()) : ?>
       <?php the_post_thumbnail('full'); ?>
   <?php else : ?>
   <?php endif ; ?>

   <h1 class="post-title"><?php the_title(); ?></h1>
   <div class="content">
 	   <?php the_content(); ?>
   </div>

 </div><!-- .entry-content -->
</div><!-- .post-inner -->

ここで画像がない時の画像を制作しようとするも、ミニマルのコンセプトに反すると考え中止。

テンプレートタグ/the post thumbnail

the_post_thumbnail( 'full' ); // フルサイズ (アップロードした画像の元サイズ)

記事タイトルがない時

   <?php if (!get_the_content()) : ?>
   <?php else : ?>
     <h1 class="post-title"><?php the_title(); ?></h1>
   <?php endif ; ?>

気になったので対応した。

テーマファイル全体の幅

アイキャッチがフルサイズなのはいいが、全体の幅をどうするか。

そこで、全体の幅の90％に指定。

<div class="container min-vw-90">

あとはユーザーのご意見を伺う形へ。

全体の装飾

bootstrapのclassを少し入れた。

functions.phpで記事を逆順にする

function change_sort_old( $query ) {
 if ( $query->is_home() ) {
   $query->set( 'order', 'ASC' );
   $query->set( 'orderby', 'date' );
 }
}
add_action( 'pre_get_posts', 'change_sort_old' );

これで投稿が上から順に表示される。

header.phpの修正

<?php bloginfo( 'charset' ); ?>
文字コード

<title><?php bloginfo( 'name' ); ?></title>
サイトタイトル

<meta name="description" content="<?php bloginfo( 'description' ); ?>">
サイト説明文。キャッチフレーズ。

見本はこれで完成。

WordPress自作テーマファイルの公開のために

参考URL｜作者様ありがとうございます。

自作テーマをWordPress公式ディレクトリに登録するつもりなら作成時やってはいけないこと

公式テーマとしての公開は迷いますが。。。

ミニマルすぎて、審査に通らないと思われます。

この後、WordPressのセキュリティ設定へ。
※細かい対策を公にするとセキュリティの意味が薄れるので、ほどほどに記載。

Webサイト・ホームページの表示速度参考（デフォルト状態）

画像4

画像5

WordPress設置や運用等のお問い合わせ

Twitter：ムジン社長∥Web運用のミニマリスト

合同会社ムジンケイカクプロよりミニマリストの方にお知らせでした。

いつもお読みいただき、ありがとうございます。 書くだけでなく読みたいので、コメント欄で記事名入れてもらうと見に行きます。