【Ver.3.0】WordPress テーマ "Hueman" のテーマカスタマイザーで出来る設定

最終更新日

Comments: 45

当ブログでは、WordPress テーマの Huemanをカスタマイズして使っています。 世界でもかなり人気のあるテーマで Hueman で作られたサイトをちょこちょこ見かけることもあるのではないでしょうか。
さて、そんな Hueman ですがちょっと前にバージョン 3.0 に更新されました。 バージョン 3.0 からテーマカスタマイザーの場所がちょっと変わったのでその説明と、出来る設定の紹介です。

2017年8月追記:
現在こちらにある情報は少々古くなっています。カスタマイザーの項目自体は存在しているものの、設置されている場所が違ったり見出しが変わったりしているかもしれませんし、もしかすると項目自体も消えているかもしれません。が、最近私は Hueman テーマの翻訳編集権限を頂き、最新版まですべてを翻訳させていただいたので、おそらくこのページがなくとも普通に理解できるはずです。もしこの翻訳おかしくね? や この翻訳わかりにくくね? っていうのありましたら、連絡いただければ直しいきます!
もしくは、https://translate.wordpress.org/locale/ja/default/wp-themes/hueman にて新たな翻訳を提案して頂いても大丈夫です。

テーマカスタマイザーの場所

1.x系のバージョンだと、[外観] > [Theme Options] にあったのが、3.0では、[外観] > [カスタマイズ] へと移りました。 これにより、プレビューを見ながら出来るようになったので便利です。 1

スポンサーリンク

カスタマイズ設定

Global Settings

Site Identity

サイトタイトル・キャッチフレーズ・サイトアイコン・Feed URLの設定
Feed URL はデフォルトのままで問題無いです。

 

General Design Options
  • Dynamic Styles

General Design Options の設定を適応させるためにはチェックを入れる。

 

  • Boxed Layout

指定した幅から要素がはみ出さなくなり、背景色で塗りつぶされるようになります。

4 5

1枚目がオフ(デフォルト)・2枚目がオン
  • Font

サイト全体で使うフォントの設定です。
Arial, Georgia, Verdana, Tahoma は閲覧者のローカルファイルから、Titillium Web, Latin (Self-hosted) はテーマ内に配置されているフォントファイルから、それ以外は Google Fonts からロードされます。

 

  • Website Max-width

サイトの最大の幅を指定します。

 

  • Sidebar Width

サイトバーのウィジェットの余白を設定します。

 

  • 色の設定

Primary Colorはサイトのアクセントとなる色です。リンク色等に幅広く適応されます。
その他は読んだ通りの意味だと思います。

 

  • Image Border Radius

画像の角に丸みを付ける設定です。 数値を増やせば増やすほど丸くなります。

 

Social links

SNSリンクの設定です。設定するとフッター内の右側、サイドバー上部SNSリンクが出ます。phpファイル内で<?php hu_print_social_links() ; ?>を使って呼び出すことも出来ます。

Add New でリンクを追加します。
Select an icon でアイコンを指定、Social link url で自分のページの URL を指定し、Add it で追加することが出来ます。
追加した後、アイコンの色やタイトルをいじる事ができます。

 

Comments

コメントを表示/非表示の切り替え(チェックでオンオフ)

  • Posts Comments・・・投稿ページにコメントを表示
  • Pages Comments・・・固定ページにコメントを表示

 

Mobile devices

レスポンシブ/非レスポンシブの切り替え。チェックを入れればレスポンシブ、入れなければ非レスポンシブです。

Performances and SEO

圧縮した CSS を使うか使わないかの設定。オンにすると main.css ではなく main.min.css が読み込まれます。
子テーマ等を使用していて、直接 main.css に手を加えていない場合はオンにすることを推奨します。

 

  • Use Structured Data Markup for your posts

パンくずリストを検索エンジンに送信するようになります。
特に理由がない限りチェックを入れることを推奨します。

 

Hueman Admin Settings
  • Display the "About Hueman" page in the "Appearance" admin menu

外観メニューの中に About Hueman のリンクを表示するかしないかの設定。お好みでどうぞ。

  • Display a Help button in the admin bar

Admin Bar (ログインすると出てくる上のメニュー) にヘルプボタンを表示するかしないかの設定。お好みでどうぞ。

 

Header

Header Design

ヘッダーのロゴ、サイトの説明の表示/非表示切り替えなど

Header Advertisement Widget

チェックするとサイトタイトル右側にウィジェット欄が追加されます。

 

Content

Layout options

カラム数の変更やサイドバーの位置変更ができます。
更に各ページでそれらを調整できます。

Sidebars : Design and Mobile Settings
  • Sidebar Top Boxes

サイドバー上部にSNSボタンを表示します。

 

  • Mobile Sidebar Content

モバイル時にサイドバーをどうするかの設定です。

  • Display both sidebars … メインコンテンツ下にサイドバーを表示
  • Hide primary sidebar … Primary のみ非表示
  • Hide secondary sidebar … Secondary のみ非表示
  • Hide both sidebars … サイドバー表示なし
サイドバーの名称について
2カラムの場合・・・Primary
3カラム、コンテンツが中央の場合・・・左 … "Primary"・右 … "Secondary"
3カラム、コンテンツが左もしくは右の場合・・・外側にある方が "Primary"・内側にあるほうが "Secondary"

 

Blog Design and Content
  • Display a custom heading for your blog.

トップページ表示時のコンテンツ上部の枠の表示/非表示

 

  • Excerpt Length

トップページに表示する投稿記事からの抜き出す文字数

 

  • Display your blog post as a standard list.

standard list を使用するかしないかの設定

32

1枚目が通常の表示・2枚目が standard list 時の表示
 

 

 

---FEATURED POSTS(スライダーの設定)---
  • Feature posts on top of your blog

新着記事をスライダーで表示します。

 

  • Select a category to feature

指定したカテゴリーのみが表示されるようになります

 

  • Featured Post Count

スライダーに表示する投稿の数

 

  • Display the full post content

スライダーに表示される記事の抜粋部分が全文表示になります

 

  • Animate your featured posts with a slideshow

指定した秒数毎にスライダーが動きます。

 

  • Display the featured posts also in the list of posts

スライダー表示しつつ、記事一覧にも表示します。

スライダーを使いたい場合はカテゴリーを指定し、"Display the featured posts also in the list of posts" のチェックも入れて使うのがいいかと思います。

 

Single Posts Settings
  • Single - Author Bio

投稿ページに投稿者の紹介が表示されます

  • Single - Related Posts

関連記事をタグで表示するかカテゴリーで表示するかの選択

  • Single - Post Navigation

ポストナビゲーション(前後記事リンク)を表示する位置の変更。Below content だと記事の下 関連記事の上に表示。
Below content が無難だと思います。

 

Thumbnails Settings
  • Thumbnail Placeholder

アイキャッチ画像が指定されていない場合にテーマで用意された画像を使うようになります。

thumb-standard

こんな画像です 
  • Thumbnail Comment Count

アイキャッチ画像にコメント数を表示します。
このサイトみたいな弱小ブログだと0しかなくて悲しくなるのでオフにしています。
コメント数が多いブログでオンにすると面白いと思います。

 

Footer

Footer Design
  • Select columns to enable footer widgets

フッターにウィジェットエリアを追加

 

  • Select columns to enable footer widgets

前の項で追加したウィジェットエリアのカラム数を指定します。

 

  • Replace the footer copyright text

フッターのCopyrightテキストに表示する文字列の編集

 

  • Footer credit text

Copyright表示の下にHuemanテーマのクレジットを追加

 

Footer Advertisement Widget
  • Display a widget ads area in your footer

"footer-ad"という名前のウィジェットエリアを追加

 

Dynamic Sidebars and Widgets

Create And Manage Widget Zones

Add New で新規ウィジェットエリアを作成

Name・・・ウィジェットエリアの名前を指定
Location・・・ウィジェットエリアの位置を指定(複数指定可)
Context・・・表示する条件を指定(複数指定可)

 

スポンサーリンク

以上です。

かなり設定できる項目が多く、上の項目では全て拾いきれていません。
実際の表示を確認しながら色々試して見るのがいいと思います。

Hueman テーマのカスタマイズについて聞きたいことがあればお気軽にコメント欄までどうぞ!

フリーランスで WordPress, フロントエンド開発をするエンジニア (お仕事募集中)。最近は WordPress テーマの作成やレビュー、翻訳などやってます。フロントが好き。Twitter: @mirucons

スポンサーリンク

45件のフィードバック

  1. 初めまして。
    Wordpress(4.9.1–ja)初心者です。
    既存の3カラムレイアウトサイトをHueman3.3.25にてに置き換える勉強をしています。
    左サイドメニューの作成方法についての質問です。
    作成途中に表示(数字はレベルです)される状態です。
    -1ご挨拶
    -1会社概要
    -2沿革
    -2設立
    -3資本金
    公式サイト https://demo-hueman.presscustomizr.com/demo/layouts/child-menu-left/ のような表示か、
    1ご挨拶
    1会社概要 ▶
    会社概要にオンマウスで
    1会社概要
       2沿革
       2設立 ▶
    というように表示したいと思っています(ヘッダ、フッタでは階層表示しています)。
    Wordpressメニューウィジェットでナビゲーション追加→メインと指定しておりますが思うようにならず、また、カスタマイズオプションでも同様に設定してみましたがダメでした。どのように設定したらよいのでしょうか?
    Proにアップグレードしなければならないでしょうか?
    よろしくご教授お願い致します。

    • 公式のデモのトップバーの、Layouts > One column > Third level Nav の表示のようなにドロップダウンメニューをつけたいということであってますか ? でしたら、そもそもの WordPress の機能として備わっている、メニューの サブアイテム 機能で出来ますよ。
      詳しくは、こちら あたりをご覧頂くといいと思います。

      • コメントをありがとうございます。
        言葉が少なかったようで申し訳ありません。
        左サイドに縦のマルチレベルメニューを作りたいです。
        フライアウトメニューというのでしょうか。

  2. 詳しい説明ありがとうございます。トップページの記事が2カラムな所を4カラムにしたいのですが、どうすればいいでしょうか?

  3. ミルコン@管理人様

    度々失礼致します。

    以前から、サイドバーの背景が暗く(灰色)、いつカスタム機能で変えられるようになるかと待っています。

    今まではCSSから.sidebar-contentを指定してちょっと強引にウィジットが入っている部分だけ色を明るめに変更していましたが、3.3.9に更新したところ反応しなくなってしまいました。

    もしかしたらコメント欄の背景などとどこかで共有してるのかな?と探してみましたが私には見当が付きません。もしお分かりになるようでしたら、指定場所を教えて頂いても宜しいでしょうか。

    本当はサイドバー部分だけの色変更が嬉しいですが、この際別の個所の色も同時に変わってしまっても構いません。

    • 最新版の 3.3.9 でも .sidebar-content の色を変えるだけでサイドバーの背景色が変わることを確認しました。
      おそらく 3.3.9 のアップデートで ".sidebar .sidebar-content" という指定に変わったせいで有線順位が負けているのかと思います。
      せっかくの機会ですから、ブラウザの開発ツールの使い方を覚えてみてはいかがでしょうか。

      • 返信有難う御座います。

        何故か私の場合は変化がありません...

        >ブラウザの開発ツールの使い方を覚えてみてはいかがでしょうか。

        クロームのですよね?
        ちょっと使用してみて自己解決しようと思います!有難う御座いました。

  4. はじめまして 
    Huemanを使い始めたのですが見出しの装飾の仕方がわからず
    悩んでいます お時間があれば教えてもらえないでしょうか
    よろしくお願いします。

    • カスタマイザーに CSS を記述する場所があるのでそこに記述するか、子テーマを作成して style.css に、見出しのカスタマイズを書けば可能です。

      • お返事ありがとうございます
        cssジェネレーターというところでcssをもらったのですが
        見出し2登録する際はどう編集したらいいんでしょうか
        .sample2 {
        position: relative;
        color: #ffffff ;
        background: #c31586;
        font-size: 16pt ;
        line-height: 1;
        margin: 20px -10px 20px -10px;
        padding: 10px 5px 10px 20px;
        box-shadow:1px 3px 7px 0px #666666 ;
        border-top:3px solid #fff7f6;
        }
        .sample2:after, sample2:before {
        content: "";
        position: absolute;
        top: 100%;
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-top: 5px solid #333;
        }
        .sample2:after {
        left: 0;
        border-right: 5px solid #333;
        }
        .sample2:before {
        right: 0;
        border-left: 5px solid #333;
        }
        何度もすいません

  5. 1 2

ミルコン@管理人 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントする

スパム対策の為、日本語が含まれない投稿は無視されますのでご注意ください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください