【Ver.3.0】WordPress テーマ "Hueman" のテーマカスタマイザーで出来る設定
当ブログでは、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では、[外観] > [カスタマイズ] へと移りました。 これにより、プレビューを見ながら出来るようになったので便利です。
スポンサーリンク
カスタマイズ設定
Global Settings
Site Identity
サイトタイトル・キャッチフレーズ・サイトアイコン・Feed URLの設定
Feed URL はデフォルトのままで問題無いです。
General Design Options
- Dynamic Styles
General Design Options の設定を適応させるためにはチェックを入れる。
- Boxed Layout
指定した幅から要素がはみ出さなくなり、背景色で塗りつぶされるようになります。
- 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 を使用するかしないかの設定
---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
アイキャッチ画像が指定されていない場合にテーマで用意された画像を使うようになります。
- 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 テーマのカスタマイズについて聞きたいことがあればお気軽にコメント欄までどうぞ!
スポンサーリンク
45件のフィードバック
-
ピンバック: ブログ移転中メモ | 勝たない投資
初めまして。
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カラムな所を4カラムにしたいのですが、どうすればいいでしょうか?
ミルコン@管理人様
度々失礼致します。
以前から、サイドバーの背景が暗く(灰色)、いつカスタム機能で変えられるようになるかと待っています。
今まではCSSから.sidebar-contentを指定してちょっと強引にウィジットが入っている部分だけ色を明るめに変更していましたが、3.3.9に更新したところ反応しなくなってしまいました。
もしかしたらコメント欄の背景などとどこかで共有してるのかな?と探してみましたが私には見当が付きません。もしお分かりになるようでしたら、指定場所を教えて頂いても宜しいでしょうか。
本当はサイドバー部分だけの色変更が嬉しいですが、この際別の個所の色も同時に変わってしまっても構いません。
最新版の 3.3.9 でも .sidebar-content の色を変えるだけでサイドバーの背景色が変わることを確認しました。
おそらく 3.3.9 のアップデートで ".sidebar .sidebar-content" という指定に変わったせいで有線順位が負けているのかと思います。
せっかくの機会ですから、ブラウザの開発ツールの使い方を覚えてみてはいかがでしょうか。
返信有難う御座います。
何故か私の場合は変化がありません...
>ブラウザの開発ツールの使い方を覚えてみてはいかがでしょうか。
クロームのですよね?
ちょっと使用してみて自己解決しようと思います!有難う御座いました。
はじめまして
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;
}
何度もすいません