2016.05.21
2677文字 / 読了時間:3.3分程度
sozai

WordPress用テーマ(テンプレート)、最近作ったもの3種類の紹介とか。

それぞれ、ベースはだいたい同じだけど、デザインがそこそこ違うので別テーマにわけてたり。

WordPress用テーマ「Ateh’s theme」共通の特徴?

共通する特徴は、だいたいこんな感じ。

基本的な特徴

順不同でこんな感じ。

  • 個人向(創作系向)
  • 基本1カラム系
  • レスポンシブ対応
  • jQuery使用
  • 多数ジャンル(カテゴリ)を扱うサイトに便利なカテゴリごとの一覧表示
  • アクセントにランダム画像(unsplash)表示
  • 見出し(h2,h3)下に自動で画像(unsplash)配置
  • 配色ランダム(セット複数有)
  • プロフィールカスタマイズ対応
  • コメント機能対応
  • 見出しから目次自動作成メニュー表示
  • パンくずリスト対応
  • 要約対応
  • 記事の文字数カウント
  • ランダムリンク
  • カスタム投稿対応
  • 縦書対応

デザイン的な特徴?

デザイン的には、取扱カテゴリ(ジャンル)多め、文字中心――なサイトを想定していたり。

文字数カウントあるし、見出しから自動目次作成(右マウスオーバーで表示、スマホ非対応)しているので、長くても読みやすいかなあとか。

実現できているかはともかく心がけたもの。

  • 個性ある(たぶん)デザイン
  • ランダム配色、ランダム画像表示で飽きにくいデザイン
  • 余白多めで圧迫感低め
  • 自動的に画像を適宜ランダム表示(h2,h3見出し下、hr等)で、文字だけしか書かなくてもマイルドなデザイン
  • 引用(blockquote)がわかりやすい
  • リスト(ul,li)がわかりやすい
  • 強調(strong)がわかりやすい
  • 記事のヘッダとフッタを目立つようにして、導線も多めに
  • コメント欄をオープンにしても鬱陶しくないデザイン
  • 見出しから自動目次で親切(たぶん)
  • 記事の文字数が表示されているので長さのイメージがつかみやすい

基本的なタグについてはそれなりに考えたつもり……。

カスタマイズ?

カスタマイズは、直接書き換えのみなのでバックアップ推奨
また、スタイルシート含めてphpで書いている部分が多いので、ftpで作業推奨

あと、文字コードは「utf-8(bomなし)」の辺りとか。

カスタマイズによく使うファイル

だいたいこんな感じ?

  • (必須)「_homecolumns.php」……トップページのデザイン。表示するカテゴリを指定等、カスタマイズ必須(最新版からは不必要に変更)
  • 「__style_M_themecolor.php」系……配色等デザインのカスタマイズに
  • (必要な時のみ)「__random_theme_img.php」……ランダムで画像を表示する場合(フルパス)
  • (必要な時のみ)「style」系諸々……個別のデザインのカスタマイズに
  • (必要な時のみ)「footer.php」……自動目次作成関連のカスタマイズ等
  • (必要な時のみ)「functions.php」……色々な機能関連(書き換え失敗で最悪サイトにログインもできなくなるので注意)

最新版(2016.05.27以降)のファイルでは「_homecolumns.php」のカスタマイズが不要にして、カスタマイズをしなくても使い始められるテンプレートに変更しました。

配色については、配色セットも同梱してあり、一番簡単に雰囲気をかえられるので、最初にカスタマイズするのはここがおすすめです。

同梱しているショートコード

ショートコードもいくつか追加してあったり。
基本的には、ランダム画像表示(ユーザ指定)用。

[random_theme_img4]

↑こんなかんじの(表示する画像ファイルは「__random_theme_img.php」で指定)が、形(四角と丸)、フィルタ有りと無しで4種類。

  • random_theme_img1([]で囲む)……四角/フィルタ有
  • random_theme_img2([]で囲む)……丸/フィルタ有
  • random_theme_img3([]で囲む)……四角/フィルタ無
  • random_theme_img4([]で囲む)……丸/フィルタ無

フィルタは「__style_M_themecolor.php」系で指定したもの、デフォではグレイスケールとかセピアとか、彩度upとか。

テンプレートファイルにショートコードを使う場合は、そのままだと使えないのでこんな感じ。

 <?php echo do_shortcode('[ショートコード名]'); ?>

WordPress用テーマ「Ateh’s theme」各種?

基本的にはデザインの違い。

Ateh’s theme-M(Square)

3つのうち一番最初に作ったもの。
トップページの配色が目立つ感じ?

wpm_screenshot5retrob

wpm_screenshot5retroc

スクリーンショット 2016-03-20 22.46.36

スクリーンショット 2016-03-20 22.46.13

Ateh’s theme-Mb(Square+)

「theme-M(Square)」のアレンジ。
ブログタイトルのcolumnの背景に写真(デフォではunsplash)を使用。
3つの中では一番新しい。

Ateh's theme-Mb(Square+)

Ateh's theme-Mb(Square+)

Ateh's theme-Mb(Square+)

wpmb_screenshot03

wpmb_screenshot04

wpmb_screenshot12

wpmb_screenshot13

Ateh's theme-Mb(Square+)

Ateh’s theme-N(News)

「theme-M(Square)」系と違って、トップページのデザインを一番上にブログタイトル、下に画像(ヒーローイメージ風)、その下に最新記事が目立つような仕様。
更新多めのスタンダードなブログ向け風。

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

WordPressテーマ「Ateh’s theme-N(News)

追記(2016.05.27)

最新版では、3つとも、home.php関連を直接いじらなくても、最初からすべてのカテゴリとその記事一覧(数は指定可)をトップページに表示できるように変更しました。

自由度は減りますが、カスタマイズしなくても最初から実用的なテンプレートとして使えるようになったと思います。

また、新しいWordPressテーマも公開しましたので、そちらのほうもみていただければうれしいです。

ワードプレステーマ「Ateh’s theme-Nb(Note)」作成

まとめ

それなりに自分としては使いやすくなったと思うけれど……。

フリーテンプレート素材として配布中なので、よろしくお願いします。





sozai





Comment
Comments


  • […] 、最近はかなり使いやすく(当社比)なってきたかも(→作成時の記事)……。 […]



  • CAPTCHA




    Memo.Medamayaki

    三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

    TEMPLATE:Ateh's theme

    ×

    Status


    苗字:
    名前:
    性別:
    年齢:
    通り名:
    出身:
    誕生月:
    誕生日:
    職業:
    種族:
    武器:
    属性:
    髪色:
    目色:
    口癖:

    Setting

    苗字:
    名前:
    性別:
    年齢:
    通り名:
    出身地:
    誕生月:
    誕生日:
    職業:
    種族:
    武器:
    属性:
    髪色:
    目色:
    口癖:




    
    × 
    ×

    Recent Posts

    ×

    Custom Menu