ホーム  >  Web制作 / WordPress / ブログ運営

【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 テーマのカスタマイズについて聞きたいことがあればお気軽にコメント欄までどうぞ！

カテゴリー:Web制作​WordPress​ブログ運営

タグ:

Toshihiro Kanai

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

スポンサーリンク

関連投稿

45件のフィードバック

  1. はじめまして、wordpressでカスタマイズを始めたのですが、
    こちら　http://www.webcreatorbox.com/tech/wordpress-child-theme/
    にあるやり方で子テーマを作成しても表示に反映されません。
    念のため別テーマ（Twenty Fifteen）で子テーマを作成し、
    同じような記述をしたところ反映されました。
    これはHuemanがCSSを分割しているためでしょうか？
    なおカスタマイザーの詳細 > 追加CSSでCSSを追加されると普通に反映されます。
    あまり事例もなく途方に暮れております。
    不躾ですがどうかお力をお貸し下さい。よろしくお願いいたします。

    返信

    • Hueman テーマで子テーマが使えないということはないです。
      style.css のヘッダーの記述があっているか今一度確かめてみてください。
      公式の Docs ではこのように記載されています。

      /* 
Theme Name: My Hueman Child Theme  
Theme URI: http://mysite.com/ 
Description: My description 
Author:Me
Author URI:http://mysite.com/
Template: hueman
Version: 1.0.0
*/

      http://docs.presscustomizr.com/article/239-using-a-child-theme-with-hueman

      返信

  2. 初めまして。
    Huemanをインストールし、始めたばかりです
    カスタム方法をお聞きしたいと思います。

    1、記事の下やトップページの下にあるスポンサーリンクの設置方法です。
    フッターのウィジットになるのでしょうか？
    それとも別の設置方法があるのでしょうか？

    ２、トップページから次のページへ移行する所で　12345...»最後 »　となっています
    私のは、次のページしか表示されていません。
    どのように変更すればよろしいでしょうか？

    まだまだ始めたばかりですので、変更する場所や方法を教えて頂きたいです

    宜しくお願い致します。

    返信

    • こんにちは。コメントありがとうございます。
      1に関してですが、私はPHPファイルを編集し、広告を表示させております。挿入場所をブラウザの開発者ツール等を使いお調べ頂き、その場所に広告コードを挿入することで広告を表示させることができます。
      2に関しては、プラグインの wp-pagenavi をインストールし有効化することで変更されます。

      返信

      • ありがとうございます。
        検索して、設置することができました。
        また、プラグインも教えて頂きありがとうございました。

        返信

  3. 突然失礼致します。
    Huemanを使用しているのですが、新規のサイドバー作成はどこからすればよいのでしょうか？
    初歩的な質問ですみません。

    返信

  4. こんばんは。
    旧タイプの1.x系に子テーマをあてて運用中です。
    基本的にはコピペでなんとかCSSをいじれている程度の素人です。

    現状でも特に不満はないのですが、サイトの高速化を進めている最中で、テンプレも最新の物の方が良いのかな？？　と感じています。

    しかし、バックアップを取って試しにアップデートしたのですが、設定の仕様が大きく変わっていた（子テーマのcssも反映されなくなった部分があるような）為に、テストの為だけに現状と同じ状態に戻して比較するのはかなりの手間が掛かりそうです。

    管理人様的には高速化する為にテンプレをアップデートするという選択はどう思うでしょうか。
    セキュリティ面は最新版をキープするのがベストだとすると、いずれはアップデートしなければならないのかもしれませんが...

    一般的or個人的な意見で構いませんのでお聞かせ下さい。

    返信

    • アップデートによりセキュリティ面、速度面的にもメリットが得られるかと思います。
      1.x から 3.x へのアップデートですが、かなり根幹的な部分も変わっていましたので確かに難易度的には高めかもしれませんね。かくいう私もまだ部分的に 1.x のファイルを使っていたりします。
      ですが、カスタマイザーの内容はちゃんと引き継がれていたりなどアップデートの際にあまり苦労しないような設計にはちゃんとなっていると思います。
      記事中にも触れましたが、カスタマイザーがリアルタイムで反映されるようになったので更新する手間も省けるようになってます。あの変わったカスタマイザーは始めびっくりされるかと思いますが、1.x 自体の物のはそこまで大きくは変わってないですよ。日本語化もされてますしとっつきやすいのではないでしょうか。

      テストをする際は本番環境ではなくテスト用にローカルにサイト立ち上げると良いですよ！ そこに 3.x のテーマをインストールし子テーマを適応させてみて色々確かめてみるのがよいかと思います。

      返信

      • おかげさまで無事更新が完了しました。
        有難う御座います。

        1点お伺いしたいのですが、ヘッダにメニューを追加した場合、スマホサイズにするとアコーディオンメニューになり、左側のスペースにテキストを入れられるのですが

        1.xの時はheader.phpに

        <!-- put your mobile menu text here -->

        と記述できる欄があり、3.3.3ではparts/header-nav-topbar.phpに移動していたので、こちらにコメントを書いたのですが、直接書いても、子テーマに移して書いても反映されませんでした。

        こちらはカスタマイザー内には以前から無いものなので、昔の名残で残されているだけなのでしょうか（1.xの時は反映されていました）。それともちゃんと反映させる方法があるのでしょうか。

        お分かりになりましたら教えて頂きたいです。

        返信

        • 試しにこちらで検証してみましたが、<!-- put your mobile menu text here --> の部分を表示したい文字にまるまる置き換えてしまえばしっかり反映されるようです。

          返信

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

            わざわざ試して頂いて申し訳ありません。

            やはり私の場合は駄目みたいです。
            少し残っている子テーマの1.x のファイルが邪魔をしているのでしょうか。

            もう少しいじってみます。
            有難う御座いました。

            返信

            • parts/header-nav-topbar.php は
              header.php => parts/header-main.php => parts/header-nav-topbar.php
              という順番に読み込まれています。

              子テーマに header.php があるようでしたら、parts/header-main.php と parts/header-nav-topbar.php は読み込まれません。
              ですので、子テーマの header.php にてメニューを呼び出しているのであれば、その辺りに記述すれば良いかと思います。
              よく分からなかったら子テーマの header.php ごと貼り付けていただいても対応できるかと思います。
              もしそれを公開するのが嫌ならばメールか Twitter で送っていただいても構いません。

              返信

          • parts/header-main.phpにも同じ欄があり、こちらを編集したら反映されました。

            これで完璧です！お騒がせして申し訳ありませんでした。

            返信

            • 返信書いてる途中に返信が来ました笑
              parts/header-main.php はヘッダーメニューの場所に、parts/header-nav-topbar.php はトップメニューになるようになっているので、使われているメニューはヘッダーメニューの方だったようですね。
              なにより解決して良かったです。

              返信

              • ほとんど仕組みを理解していないので勉強になります。
                また何かありましたら、色々と御教授下さい。

                返信

  5. はじめまして。
    huemanを使ってサイト作っている初心者です。
    見出しをデザインしたいのですが、子テーマのスタイルシートに記入しても変化がありません。
    なぜでしょうか？
    教えていただけると助かります。

    返信

      • 返信遅れました。すいません。

        /*見出しh2*/
        .entry-content h2 {
        border-left:5px solid #1f5e73;
        padding: 0 0 0 15px;
        line-height:2;
        font-size:18px;
        background-color:#fff;}

        このように記述しています。
        他のテーマでは反映されるのですが、huemanでは反映されません。

        返信

        • Hueman テーマには ".entry-content" というクラス名はありません。なので ".entry-content h2" を ".entry h2"のように変更すれば反映されるものかと思います。

          返信

  6. はじまして。
    huemanのテーマを使い始めたばかりです。

    ＞コメントを表示/非表示の切り替え（チェックでオンオフ）
    という設定項目が見つからず、
    個別記事にもコメント欄もコメントフォームも表示されません。
    コメントは受け付ける設定になっています。
    どうすればコメント機能を表示させることができますか？
    WP4.2.4　テーマは最新版使っています。

    返信

    • あひるです。
      他のテーマに変えるとコメント欄出てきます。ので、WPの設定の問題ではないようです。
      ちなみに、huemanの設定箇所は、こんな画面ですよね？
      https://gyazo.com/d310b5dcd5a9de9e9b899daffd83f233
      ここのSocial linksの下にcommentの設定がくるのかと思って探してるのですが、異なるようです。

      返信

      • どうやらバージョン3.2.0のバグのようです。GitHubのissueにすでに上がってました。(https://github.com/presscustomizr/hueman/issues/292)
        それを修正した3.2.1のソースはGitHubに上がっていますが、まだWordPressに提出はしていないようです。
        解決法は次のバージョンアップを待つか、多少強引な直し方となりますが、single.phpの60行目の

        <?php if ( hu_is_checked('post-comments') ) { comments_template('/comments.php',true); } ?>

        を、

        <?php comments_template('/comments.php',true); ?>

        に修正すれば直ると思います。今回に限っては次回バージョンで修正される問題ですので、親テーマを直接いじってしまっても問題ないかと思います。

        返信

        • ありがとうございます！そうだったのですね！修正したら無事表示されました！

          返信

  7. はじめまして。
    huemanを使ってサイト作りを始めている者です。

    ミルログ様では、
    記事上部にある「記事公開日」「最終更新日」の文字、
    記事の終わりにあるページ移動の「前の記事」「次の記事」の文字、
    「関連記事」の文字が日本語で表示されていますが、

    時間をかけていろいろなphpファイルを子テーマで編集しているのですが、
    どうしてもこれらの表記が、
    「BY-○○・PUBLISHED……UPDATED……」
    「PREVIOUS STORY」「NEXT STORY」
    「RELATED POST」
    から変更することができず、困っています。

    特に、authorの表示はいらないので、非表示にしようと試みているのですが
    ここにもつまづいています。

    初歩的な質問かもしれず恐縮ですが
    これらの日本語化の方法をご教授いただけましたらと思います。
    何卒、よろしくお願いいたします。

    返信

    • ・日本語化について
      子テーマで該当部分のPHPファイルを変更することで日本語化が可能です。例えば、前後ポストリンクの'Next story'の表示であれば、/hueman-child/parts/post-nav.phpの3行目の

      __('Next story', 'hueman')

      を、

      __('次の記事', 'hueman')

      に置き換えることで、'Next story'が'次の記事'に置き換わります。
      他の部分もほぼ同様の手順で可能となります。
      ＊独自に翻訳ファイルを作成することでも可能ですが、手順が面倒なので割愛します。興味があれば「WordPress 翻訳ファイル」等で調べてください。

      ・Authorの非表示について
      /hueman-child/parts/single-author-date.phpの7行目から10行目の以下の部分をまるまる削除していただくことで対応が可能です。

      <?php _e('by','hueman'); ?>
   <span class="vcard author">
     <span class="fn"><?php the_author_posts_link(); ?></span>
   </span> &middot;
      返信

  8. 初めまして。
    今日WPを始めて
    Huemanをインストールしていじっている、初心者です。
    記事を試しに上げてみたのですが
    リスト表示だけで、記事内容に飛ばないのですが
    なぜでしょうか？？

    返信

    • リンクになっているのはサムネイル画像かタイトル部分のみですので、どちらかをクリックしないと記事には飛ぶことができません。
      もし、それで飛ばないのであれば、PHPファイルに何かミスがあると思われます。
      content-standard.phpファイルを一度初期状態に戻してみてください。

      返信

  9. Windowsでのブラウザ表示でフォントがギザギザしてしまうのですが解決するにはどのファイルをいじればいいでしょうか？main.cssやその子テーマもいじってみたのですが一向にフォント変更が反映されずに困っています。
    Huemanのバージョンは3.1.6です。もしよろしければ教えて頂けると助かります。
    よろしくお願い致します。

    返信

    • フォントがギザギザしてしまうというのは、MS Pゴシックで表示されてしまうということでしょうか？
      そういうことでしたら、おそらくfont-family指定が子テーマ→親テーマの順で読み込まれてしまい、上書きされてしまっていることが原因だと思います。
      以下のようにfont-family指定の最後に"!important"をつければfont-familyを指定できるはずです。

      body { 
 font-family: meiryo, 'Hiragino Kaku Gothic ProN', sans-serif !important;
}
      返信

      • ありがとうございます！末尾に”!important”をつけた所Windowsで正常に表示されました！！！
        ここ数日間ずっと頭を抱えていたので本当に助かりました！！！
        ありがとうございました！！！

        返信
    10. 1 2
  1. ピンバック: wordpressのテーマ。 – よしぼーいのキャンパス

まつ へ返信する コメントをキャンセル

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

コメントする

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

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