WordPress Ashe （アッシュ）テーマのカスタマイズ ～後編～
前回からのつづき
WordPressに海外製のテーマAshe（アッシュ）の無料版をインストールした時の備忘録。
前回はインストールからおすすめリンクまでの記事だったので今回はその後編とする。
また今回はカスタマイズメニューの”ブログページ”以降を対象とする。
ブログページ
ブログページ（投稿一覧ページ）の表示形式に関する設定を行う。
General
投稿説明 | 投稿一覧での本文の表示方法に関する設定
| ||||||
投稿ページネーション | 投稿一覧ページが複数ページある時のページネーションの仕方
|
Post Elements
投稿の何の項目を表示対象にするかの設定。
カテゴリーを表示する | チェックするとカテゴリーが表示される（表示例参照） |
日付を表示する | チェックすると日付が表示される（表示例参照） |
コメントを表示する | チェックするとコメントが表示される（表示例参照） |
先頭文字を大きくを表示 | チェックすると本文抜粋の先頭文字が大きく表示される（表示例参照） |
投稿者を表示 | チェックすると投稿者が表示される（表示例参照） |
Show Facebook | チェックするとFacebookへのシェア用アイコンが表示される（表示例参照） |
Show Twitter | チェックするとTwitterへのシェア用アイコンが表示される（表示例参照） |
Show Pinterest | チェックするとPintrestへのシェア用アイコンが表示される（表示例参照） |
Show Google Plus | チェックするとGoogle Plusへのシェア用アイコンが表示される（表示例参照） |
Show Linkedin | チェックするとLinkedinへのシェア用アイコンが表示される（表示例参照） |
Show Reddit | チェックするとRedditへのシェア用アイコンが表示される（表示例参照） |
Show Tumblr | チェックするとTumblrへのシェア用アイコンが表示される（表示例参照） |
関連投稿 – 表示 | ヘルプによると”関連”を選択するとブログページの記事毎に「これも好きかも」と関連記事が表示される様だが、記事数が少ない為なのか当方の環境では表示されなかった |
個別投稿
記事詳細ページの表示形式に関する設定を行う。
Post Elements
カテゴリーを表示する | チェックするとカテゴリーが表示される（表示例参照） |
日付を表示する | チェックすると日付が表示される（表示例参照） |
コメントを表示する | チェックすると日付が表示される（表示例参照） |
投稿者を表示 | チェックすると投稿者が表示される（投稿ページ下部表示例参照） |
投稿者の説明を表示 | チェックすると投稿者の説明が表示される（投稿ページ下部表示例参照） |
関連投稿 – 表示 | ”関連”を選択すると記事の下に「これも好きかも」と関連記事が表示される ※こちらは関連記事が表示された
|
ソーシャルメディア
TOPバー※に自分の利用しているソーシャルメディアへのアイコンを最大４つまで表示させる事ができる。
新しいウィンドウでソシアルリンクを開く | チェックをするとソーシャルメディアアイコンをクリックした時に新しいウィンドウで開く |
Social Icon #1～#4 | ソーシャルメディアアイコンを最大４つまで指定できる |
アイコンを選択 | プルダウンの中からSNSのアイコンを選択する 2019年2月27日現在、下記の６２種類のアイコンがあった
|
URL | アイコンをクリックした時のリンク先を指定する 自SNSのページを設定する |
タイポグラフィ
フォントファミリーを指定する。
但し、ここで指定したフォントが反映されるのは英字のみなので日本語についてはWebフォントを使ってフォントを変えるのが良いと思う。
Logo
フォントファミリー | ロゴのフォントファミリーを指定する 但し指定したフォントが反映されるのは英字のみ |
Navigation
フォントファミリー | ナビゲーションのフォントファミリーを指定する 但し指定したフォントが反映されるのは英字のみ 上記の例だと”WordPress”の文字列のみフォントファミリーが反映される |
イタリック | チェックをするとイタリックになる |
大文字 | チェックをすると大文字になる |
ページのフッター
フッターの表示に関する設定を行う。
著作権テキスト | フッターに表示する著作権のテキストを設定する $year（年）、$copy（Copyrightのマーク）などの変数が使用できる |
スクロールのトップボタンを表示する | チェックをするとトップに戻るアイコンが表示される |
プリローダー
アニメーションのプリロード | チェックをするとページを表示する前にアニメーションが表示される この後にページが表示される 表示されるアニメーション
|
レスポンシブ
この設定はモバイル表示の時のみ適用される。
上部メニューとメインメニューを結合する | チェックをすると上部メニューとメインメニューが結合されるのだと思うのだが当方の環境では違いは見られなかった 誰か分かる方がいれば教えてください |
特集スライダーを表示する | チェックをするとモバイル環境でおすすめスライダーが表示される おすすめスライダーの表示設定でチェックを入れると、パソコンではおすすめスライダーが表示されるがモバイルではそのままでは表示されない こちらのチェックボックスをチェックする事によりモバイル環境でもおすすめスライダーが表示される様になる
|
特集リンクを表示する | チェックをするとモバイル環境でおすすめリンクが表示される おすすめリンクの表示設定でチェックを入れると、パソコンではおすすめリンクが表示されるがモバイルではそのままでは表示されない こちらのチェックボックスをチェックする事によりモバイル環境でもおすすめリンクが表示される様になる
|
関連する投稿を表示する | チェックをすると記事の下部に「これも好きかも」の関連リンクが表示される 個別投稿の関連投稿ー表示で関連を選択すると、パソコンでは記事の下部に「これ好きかも」関連リンクが表示されるがモバイルではそのままでは表示されない こちらのチェックボックスをチェックする事によりモバイル環境でも「これ好きかも」が表示される様になる
|
メニュー
メニューについてはWordPressの他のテーマと同様の設定なので割愛
ウィジェット
ウィジェットについても設定方法は基本的に他のテーマと同様だがashe独特のウィジェット表示位置として「代替サイドバー」があった。
代替サイドバー
メインメニューの左に表示されるハンバーガーメニューのアイコン。
クリックすると左から代替サイドバーが表示される。
その他
ホームページ設定と追加CSSも他のテーマと同様なので割愛。
以上でAsheの無料版を色々といじってみた時の備忘録を終わりにする。
はじめまして。Asheの解説しているサイトが少なくて、とても助かりました。
メインナビゲーションのところの「logo」についてなのですが、数値を調節しても幅が変わらず…
元画像のサイズに合わせられる仕様なのでしょうか？わかる範囲で教えていただければ幸いです。よろしくお願いいたします。
ふかひれさん こんにちは。
こちらの環境では「ロゴの幅」の数値を変えればそれに応じて幅が変わりますね。
幅30のロゴ
幅70のロゴ
当サイトのスマホ版サイトだとうまく適応されないのかもしれないです。ありがとうございます。
もう一つ伺いたいのですが、ページ下部の投稿者の部分はどこから引用しているかご存知ですか？？
お手数をおかけしますが教えていただければ幸いです。
スマホの方は80×80のサイズ固定にしているみたいですね。
レスポンシブデザインでWindowの横幅がある一定以上の幅の時だけ設定したサイズが反映されるようにしているテーマの様です。
ページ下部の投稿者ですがWordPressのメニューのユーザ、プロフィール、プロフィール情報で設定できます。
初めまして。Ash wordpress 勉強中です。
質問があります。
参考に、メインスライダーとメインスライダーの下にあるサビネイル画像を自信の
ブログにカストマイしたくコードを読み解いているのですが、いまいち理解ができずにエラーになります。
カストマイズのメニューに「スライダー」と「スライダーの下にあるサブネイル」を表示する方法がいまいちわからないのですが教えてくれませんか？
まだまだ、初心者ですがphpを勉強中です。
教えていただけないでしょうか
よろしくお願い申し上げます。
kaz さん
こんにちは。
ちょっと状況が分からないので的はずれな答えになっているかも知れませんが。。。
「メインスライダーとメインスライダーの下にあるサビネイル画像」がどこの事か分かりませんでした。
メインスライダーとは外観ー＞カスタマイズー＞おすすめスライダーの事でしょうか？
また「サビネイル画像」とはサムネイル画像の事でしょうか。
このサムネイル画像はどの様に表示していますか？
後、「カストマイズのメニューに・・・」とありますがWordPressの外観ー＞カスタマイズに新しいメニューを追加したいという
事でしょうか？
となると、ちょっと手強いように思います。
Ashテーマの作者にお願いした方が良いように思います。
ご返信ありがとうございます。
トップページにある大きな一面のスライダー画像です。すべての投稿がランダムにスライダー表示されてる仕様です。
その真下にある３つのサブネイル画像が表示されていますが、外観の編集で、カスタマイズされる仕様になっています。指定の画像とリンク先が手動で選ぶことができる点です。
これらを抜き取り自身のブログに組み込みたいと思っていますが、わからないのです。
宜しくお願いします。
「トップページにある大きな一面のスライダー画像です」との事ですが、
１）外観ー＞カスタマイズー＞おすすめスライダー
２）外観ー＞カスタマイズー＞ヘッダー画像ー＞アップロード済みヘッダーをランダム表示
のどちらでしょうか？
２）の前提で話を進めますが、
「その真下にある３つのサブネイル画像」とありますが、こちらは外観ー＞カスタマイズー＞ホームページ設定ー＞最新の投稿
を設定すると表示される各記事のサムネイルの事でしょうか？
その前提で話を進めますが、この画像は投稿ー＞投稿一覧ー＞記事ー＞アイキャッチ画像
が表示されています。
アイキャッチ画像であればその画像を記事中に埋め込めば良いと思います。
「外観の編集で、カスタマイズされる仕様になっています」
これは具体的にはどのメニューの事でしょうか？
こんばんは。おすすめスライダーですが、皆さん画像は表示されるのでしょうか？
アイキャッチ画像を設定しても表示されず、バグなのかなぁと思ってます。
もしくはプラグインでしょうか、、。
表示までに時間がかかるなどご存知でしたら教えていただけると助かります。
ちなみにカスタマイズページでは表示されていて、編集終了すると消えます。
そまた、5枚で設定してるのですが、5枚目だけはちゃんと表示されるようでした。
謎です、、
こんにちは。
こちらの環境では５枚とも表示されますね。
ソース：投稿
投稿を表示：All Posts
スライドの枚数：５
ナビゲーション矢印を表示：チェック
ページネーションのドットを表示：チェック
に設定した所、各投稿のアイキャッチ画像が表示されています。
ちなみに、ソース：カスタムの場合は画像を設定しても表示されないようです。
ただ、こちらはもしかしたら有料版しか設定できないのかも知れません。
回答ありがとうございます！無事表示されました！