Theme making.0

posted date. 2022/04/11

　管理が簡単ないたってシンプルなテーマが欲しかったので、シンプルな機能だけのオリジナルテーマの作成をしてみることにしました。

必要なファイル

　三つのファイルがあれば、最低限の機能を稼働させることができます。

function.php

<?php

function mytheme_setup() {
// link、style、scriptのHTML5対応を有効化
    add_theme_support( 'html5', array( 'style' , 'script' ) );
// グーテンベルクのCSSを有効化
    add_theme_support( 'wp-block-styles' );
// 縦横比を維持したレスポンシブを有効化
    add_theme_support( 'responsive-embeds' );
// ページのタイトルを有効化
    add_theme_support( 'title-tag' );
// アイキャッチ画像を有効化
    add_theme_support( 'post-thumbnails' );
// RSS feed linkを有効化
    add_theme_support( 'automatic-feed-links' );
// CSSを有効化＆エディタに適用
    add_theme_support( 'editor-style' );
    add_editor_style(  'editor-style.css' );

// メニューのロケーションを登録
    register_nav_menus( array( 'primary' => 'Navigation' ) );
}
add_action( 'after_setup_theme' , 'mytheme_setup' );

function mytheme_enqueue() {
// テーマのCSSに更新時間を付与して読み込む
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_uri(),
        array(),
        filemtime(get_theme_file_path('style.css'))
    );
}
add_action( 'wp_enqueue_scripts' , 'mytheme_enqueue' );

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

<?php if( is_single() ): ?>
    <meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">
    <meta property="og:locale" content="ja_JP">
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php the_title(); ?>">
    <meta property="og:url" content="<?php the_permalink(); ?>">
    <meta property="og:description" content="<?php echo esc_attr( wp_strip_all_tags( get_the_excerpt() ) ); ?>">
    <?php if( has_post_thumbnail() ): ?>
<?php $myimg = get_post_thumbnail_id(); ?>
    <meta property="og:image" content="<?php echo esc_url( wp_get_attachment_url( $myimg ) ); ?>">
    <meta property="og:image:width" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['width'] ); ?>">
    <meta property="og:image:height" content="<?php echo esc_attr( wp_get_attachment_metadata( $myimg )['height'] ); ?>">
    <?php endif; ?>
<?php endif; ?>

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php wp_body_open(); ?>

    <div class="MyGroundwork">

<?php if( has_nav_menu( 'primary' ) ): ?>
        <nav class="MyNavigation">
            <?php wp_nav_menu( array( 'rheme_location' => 'primary', ) ); ?>
        </nav>
<?php endif; ?>

        <header class="MyHeader">
<?php if( has_site_icon() ): ?>
            <figure><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( get_site_icon_url( 64 ) ) ?>"></a></figure>
<?php endif; ?>
            <p class="MyHeader-name"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
            <p class="MyHeader-description"><?php bloginfo( 'description' ); ?></p>
        </header>


<?php if(have_posts()): ?>
    <?php while(have_posts()): ?>
        <?php the_post(); ?>

        <article <?php post_class( 'MyPost' ); ?>>

            <div class="MyPost-Header">
                <h1 class="MyPost-Header-title"><?php the_title(); ?></h1>
        <?php if( is_single() ): ?>
            <?php if( get_the_date() == get_the_modified_date() ): ?>
                <time class="MyPost-Header-time" datetime="<?php echo esc_attr( get_the_date( DATE_W3C ) ); ?>">posted date.&nbsp;<?php echo esc_html( get_the_date() ); ?></time>
            <?php else: ?>
                <time class="MyPost-Header-time" datetime="<?php echo esc_attr( get_the_modified_date( DATE_W3C ) ); ?>">posted date.&nbsp;<?php echo esc_html( get_the_date() ); ?>&nbsp;/&nbsp;last updated.&nbsp;<?php echo esc_html( get_the_modified_date() ); ?></time>
            <?php endif; ?>
        <?php endif; ?>
            </div>

        <?php the_content(); ?>

        </article>

    <?php endwhile; ?>
<?php endif; ?>

        <footer class="MyFooter">
            &copy; 1995 EasyWork-SYStem
        </footer>

    </div>

<?php wp_footer(); ?>

</body>

</html>

style.css

@charset "UTF-8";
/*
Theme Name: MY THEME
Author: EasyWork-SYStem
Description: オリジナルテーマ
Version: 0.1.323
*/

/* 変数定義 */
:root {
    --f1: 2em;
    --f2: 1.5em;
    --f3: 1.25em;
    --f4: 1em;
    --f5: 0.75em;
    --f6: 0.5em;

    --basecolor: #669966;
}

/* 基本定義 */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

h1 {
    margin: var(--f4) 0;
    font-size: var(--f1);
}
h2 {
    margin: var(--f4) 0;
    font-size: var(--f2);
}
h3 {
    margin: var(--f4) 0;
    font-size: var(--f3);
}
h4 {
    margin: var(--f4) 0;
    font-size: var(--f4);
    border-left: solid var(--f6) var(--basecolor);  /* 左罫線 */
    padding-left: var(--f6);                        /* 左余白 */
}
h5 {
    margin: var(--f4) 0;
    font-size: var(--f5);
}
h6 {
    margin: var(--f4) 0;
    font-size: var(--f6);
}

p {
    margin: 0;
    font-size: var(--f4);
    line-height: 2;
    text-align: justify;
}

figure {
    margin: 0;
    padding: 0;
}
figcaption {
    font-size: var(--f5) !important;
}

blockquote {
    margin: var(--f4) 0 !important;
    font-size: var(--f5) !important;
}
cite {
    margin: var(--f4) 0 !important;
    font-size: var(--f6) !important;
}
cite:before {
    content: "quote source > ";
}

table {
    margin: var(--f4) 0;
    font-size: var(--f5);
}

code {
    margin: var(--f4) 0;
    padding: var(--f5) !important;
    font-size: var(--f5) !important;
    line-height: 1.5;
}

a {
    color: inherit; /* 親要素の色を継承 */
    text-decoration: none;  /* 飾りなし */
}
a:hover {
    opacity: 75%;  /* 不透明度 */
}





/* エリア定義：テーマ背面 */
.MyGroundwork {
    margin: 0 auto;
    padding: 0 var(--f1);
    border: none;
    background-color: #ffffff;
}
/* 横幅：780px～ */
@media (min-width: 780px) {
    .MyGroundwork {
        width: 720px;
        border-left: #CCCCCC 1px solid;
        border-top: #CCCCCC 1px solid;
        border-right: #CCCCCC 2px solid;
        border-bottom: #CCCCCC 2px solid;
    }
}


/* エリア定義：ナビゲーションメニュー */
.MyNavigation {
    font-size: var(--f5);
}
.MyNavigation ul {
    display: flex;
    justify-content: right;
    list-style-type: none;
}
.MyNavigation li:not(:last-child) {
    margin-right: var(--f1);
}
.MyNavigation a {
    display: block;
    padding: var(--f6);
    border-bottom: solid 2px var(--basecolor);
}


/* エリア定義：ヘッダー */
.MyHeader {
    margin-top: 2em;
    margin-bottom: 4em;
    text-align: center;
}
.MyHeader-name {
    font-size: var(--f4);
    text-align: center;
}
.MyHeader-description {
    font-size: var(--f6);
    text-align: center;
}


/* エリア定義：投稿 */
.MyPost {
    padding-top: 1em;
    padding-bottom: 2em;
}


/* エリア定義：投稿ヘッダー */
.MyPost-Header {
    text-align: center;
    padding-bottom: 2em;
}
.MyPost-Header-title {
    margin: 0;
}
.MyPost-Header-time {
    text-align: center;
    font-size: var(--f6);
}
.MyPost-Header-description {
    font-size: var(--f4);
}


/* エリア定義：フッター */
.MyFooter {
    padding-top: var(--f6);
    padding-bottom: var(--f6);
    font-size: var(--f6);
    text-align: center;
    border-top: solid 2px var(--basecolor);
}





/* プラグイン定義：ContactForm7 */
.wp-block-contact-form-7-contact-form-selector {
    margin: var(--f4) 0;
}
.wpcf7-text,
.wpcf7-textarea {
    width: 100%;
    padding: var(--f4);
    border: solid 1px var(--basecolor);
    box-sizing: border-box;     /* width: 100% によるはみ出し回避のため */
}
.wpcf7-submit {
    width: 100%;
    padding: var(--f4);
    border: none;
    color: #FFFFFF;
    background-color: var(--basecolor);
    -webkit-appearance: none;
}

　まずは、この段階からシンプルなテーマ作りを始めます。

必要なプラグイン

　問い合わせフォームに「ContactForm7」というプラグインを使います。

Contact Form 7

　問い合わせフォームのスパム対策に「Akismet Anti-Spam (アンチスパム)」というプラグインを使います。

Akismet Anti-Spam (アンチスパム)

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Theme making.0

必要なファイル

必要なプラグイン

EasyWork-SYStem

what's new

search

calendar