WordPressテーマ「primitive」もちろん無料ダウンロード😄

by · 公開済み · 更新済み

WordPressテーマ「primitive（プリミティブ）」とは

WordPress用のテーマを作成しました。
その名は「primitive（プリミティブ）」ver.1.0です。
意味はその他のとおり「原始の、初期の、」と言った意味になります。

良い意味で言えばシンプルなテーマですが、別の言い方をすれば何のスタイリングもされていない手抜きテーマとなります。
個人的にはこの程度の構成で良いのですが、人によってニーズは様々なので不足に感じる人も多々居るでしょう。

コメント表示・投稿、アイキャッチ表示などの機能は在りません。
これらの機能を含むかは考慮中です。🤔
特にコメント表示・投稿にはテンプレートファイルが必要になりますので、primitive（プリミティブ）というコンセプトからあまり外したくはないし。。

興味のある人はダウンロードしてみて下さい。
もちろん「primitive（プリミティブ）」はオリジナルテーマ作成用ですので子テーマ設定前提ではありません。
カスタマイザーと画面プレビューは以下のような感じです。
テーマ名を変えて自由に使ってください。

カスタマイザーと画面プレビュー

テーマは以下のファイルから構成されています。

primitive（プリミティブ）テーマフォルダ内構成

style.css

テーマ名だけを設定していますので自由に変更してください。

1
2
3
4
@charset "utf-8";
/*
Theme Name: primitive
*/

index.php

テンプレートは必須のindex.phpのみを設定し、ページに必須のHTMLは記述されていません。
WordPressの一般的に良く見られるテンプレートタグ（関数）だけを記述しています。
ページの出力を確認した後、作成しているHTMLタグを各部に埋め込んでください。
注)　<div>の見出しのみでレイアウトがありません。<html>も設定していませんので注意してください。
基本html5の構造を含むかは考慮中です。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!--
 WordPress Theme Primitive 1.0 by Buzzlyhan
-->
 
<div>--------文字コードの"UTF-8"を常に出力</div>
<?php bloginfo( 'charset' ); ?>
 
<div>--------head内情報を出力</div>
<?php wp_head(); ?>
 
<div>--------classセレクタをbodyタグに出力</div>
<?php body_class(); ?>
 
<div>--------サイトのタイトルを出力</div>
<?php if( display_header_text() ) { bloginfo( 'name' );} ?>
 
<div>--------キャッチフレーズを出力</div>
<?php if( display_header_text() ) { bloginfo('description');} ?>
 
<div>--------ホームのURLを出力</div>
<?php echo home_url(); ?>
 
<div>--------テンプレートディレクトリの URIを出力</div>
<?php echo get_template_directory_uri(); ?>
 
<div>--------カスタムヘッダーイメージを出力</div>
<?php if ( get_header_image() ) : ?>
    <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />
<?php endif; ?>
 
<div>--------カスタムメニュー（ヘッダーメニュー）の出力</div>
 <?php
    wp_nav_menu(array(
        'theme_location' => 'header-nav',
        'container' => false,
        'items_wrap' => '<ul>%3$s</ul>',
    ));
 ?>
 
<div>--------ヘッダーウィジェット</div>
 <?php dynamic_sidebar( 'header-widget' ); ?>
 
<div>--------投稿の出力</div>
<?php
    if ( have_posts() ) :
    while ( have_posts() ) : the_post();
 ?>
 <h1><?php the_title(); ?></h1>
 <section>
    <?php the_content(); ?>
 </section>
 <?php
    endwhile;
    endif;
 ?>
 
<div>--------サイドバーウィジェット</div>
 <?php dynamic_sidebar( 'sidebar-widget' ); ?>
 
<div>--------カスタムメニュー（フッターメニュー）の出力</div>
 <?php
    wp_nav_menu(array(
        'theme_location' => 'footer-nav',
        'container' => false,
        'items_wrap' => '<ul>%3$s</ul>',
    ));
 ?>
 
<div>--------フッター情報を出力</div>
<?php wp_footer(); ?>

functions.php

wp_head()でCSSを読み込むように指定しています。
Fontawesomeなどはの読み込みは考慮中です。
メニューとウィジットは各2か所設定しています。
注) カスタマイザー内で色を変更するとbodyに対してcolor指定していますのでページの文字基本色が変わります。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?php
//////////////////////////////////////////////////
// WordPress Theme Primitive 1.0 by Buzzlyhan
//////////////////////////////////////////////////
 
//////////////////////////////////////////////////
// wp_head()によりheadタグ内に
// style.css 読み込み
// reset.css 読み込み 
// mystyle.css 読み込み
//////////////////////////////////////////////////
function my_theme_css() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    wp_enqueue_style( 'reset-style', get_template_directory_uri().'/css/reset.css' );
    wp_enqueue_style( 'my-style', get_template_directory_uri().'/css/mystyle.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_css' );
 
//////////////////////////////////////////////////
// wp_head()によりheadタグ内に
// タイトルを出力
//////////////////////////////////////////////////
add_theme_support( 'title-tag' );
 
 
//////////////////////////////////////////////////
// テーマカスタマイザー内に
// 文字色変更表示　文字色変更のスタイルタグを出力
//////////////////////////////////////////////////
function wphead_cb() {
    echo '<style type="text/css">';
    echo 'body { color: #'.get_header_textcolor().' }';
    echo '</style>';
}
 
$custom_header_args = array(
    'default-text-color' => '000',
    'wp-head-callback' => 'wphead_cb'
);
add_theme_support( 'custom-header', $custom_header_args );
 
 
//////////////////////////////////////////////////
// テーマカスタマイザー内に
// ヘッダー画像カスタマイズ表示
//////////////////////////////////////////////////
$custom_header = array(
    'width'         => 980,
    'height'        => 100,
    'default-image' => get_template_directory_uri() . '/images/header.png',
    'uploads'       => true,
);
add_theme_support( 'custom-header', $custom_header );
 
//////////////////////////////////////////////////
// メニューカスタマイズ
//////////////////////////////////////////////////
function my_menu(){
    register_nav_menus(array(
    'header-nav' => ' ヘッダーナビ ',
    'footer-nav' => ' フッターナビ ',
    ));
 }
 add_action('after_setup_theme','my_menu');
 
//////////////////////////////////////////////////
// ウィジェットカスタマイズ
//////////////////////////////////////////////////
function my_header_widget() {
    register_sidebar( array(
    'name' => 'ヘッダーウィジェット ',
    'id' => 'header-widget',
    'description' => ' これはヘッダーウィジェットです ',
    'before_widget' => '<div id="header-widget_%1$s" class="header-widget_%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="header-widget_title">',
    'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_header_widget' );
 
function my_sidebar_widget() {
    register_sidebar( array(
    'name' => ' サイドバーウィジェット ',
    'id' => 'sidebar-widget',
    'description' => ' これはサイドバーウィジェットです ',
    'before_widget' => '<div id="sidebar-widget_%1$s" class="sidebar-widget_%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="sidebar-widget_title">',
    'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_sidebar_widget' );

screenshot.png

テーマプレビューのサムネールです。
少し大きめの1200ピクセル×900ピクセルのpng画像を設定しています。

CSSフォルダ

reset.css

リセット用CSSですが、これは人それぞれ好きに使ってください。
注) scroll-padding-top: 80px; をコメントアウトしています。

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
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
html,
body {
  height: 100%;
}
 
html {
  font-size: 16px;
  scroll-behavior: smooth;
  /*　scroll-padding-top: 80px;　*/
}
 
ul {
  list-style: none;
}
 
a {
  text-decoration: none;
}
 
img {
  max-width: 100%;
}

mystyle.css

style.cssはテーマ設定用として、mystyle.cssにページレイアウトの記述前提ですが、、好きに使ってください。

1
@charset "utf-8";

imagesフォルダ

header.png

980ピクセル×100ピクセルのpng画像を設定しています。

Feel Free & Price Free Download! : ダウンロード

無料ダウンロードと言ってもライセンスが気になる人も多いので明記しておきます。
このテーマはもちろん使用、改変自由のパブリックドメインです。

“WordPressテーマprimitive1.0.zip” をダウンロード primitive1.0.zip – 1667 回のダウンロード – 15.28 KB

タグ:

おすすめ