Virtue カスタマイズメモ

posted in: その他 | 4 | 2014/7/26

 

WordPressのテーマをカスタマイズ性に優れた「Virtue」に変更しました。
以下は忘備用カスタマイズメモ。

 

① 設定 > 表示設定 > 固定ページ(HOME用固定ページ)を選択

 

② メニュー調整、ナビゲーションバー調整

 

③ 外観 > Theme Options にて以下をカスタマイズ

・Main Settings > Site Layout Style、ロゴ回り
・Home Layouut > Portfolio Carousel Settings、Icon Menu 等
・Basic Styling > プライマリーカラーを変更
・Advanced Styling > 各種バックグラウンドカラーを変更
・Typography > フォントファミリー、サイズ等変更
・Menu Settings > メニュー回り修正
・Misc Settings > Hyde Image Border をON
・Advanced Settings > CSSを追加

④ 子テーマを作成、PHP修正
以下のPHPファイルを修正後、子テーマにコピー、子テーマ有効化

・style.css ← 新規作成
・functions/php ← 新規作成(editor-style.css を読み込ませる)
・editor-style.css ← 新規作成(管理画面テキストエリアのフォント等修正)
・front-page.php ← タイトル回り
・page.php ← タイトル回り
・archive.php ← タイトル回り
・page-portfolio.php ← タイトル回り、下部にH5で「記憶の森」リンクを直接記述
・taxonomy-portfolio-type.php ← タイトル回り
・page.content.php ← タイトル回り
・templates > content-sigleportfolio.php ← タイトル回り、porfolioインデックスへのリンクがサイトトップになっていたのを../portfolio に修正
・templates > post-date.php ← 日付の表示を修正するため、コードを全削除
・templates > entry-meta-subhead.php ← 日付部分を追加
・templates > content-single.php ← 投稿ページの修正
・templates > commednts.php ← コメント部分を日本語に修正
・templates > head.php ← IE 対策のスクリプトを記入
・lib > admin-scripts/php ← 管理画面テキストエディタのフォント修正が効かなくなったためこちらにもコードを追加

・templates > home > icon-menu.php ← フロントページのアイコンにH5で「記憶の森」を直接記述(ダッシュボードには表示されないファイルなので、PCにダウンロードして修正後アップロード。その際、文字コードをUnicode(UTF-8 BOM無)、改行コードをCR+LFで保存のこと)

 

⑤ Portfolio で「物語の海」のインデックスを作成(+List Category Posts ショートコード)

 

⑥ 固定ページで「記憶の森」トップページを作成

・カテゴリをicon で作成、
List Category Posts プラグインのショートコードでカテゴリー別に記事投稿タイトルを取得
・RSS Import プラグインのショートコードで Provai.ciao の記事タイトルを取得
・icon とbuttonのショートコードで「物語の海」へのリンクボタンを作成
※iconやボタン回りがCSSで制御できず、直接 style コードを記入 

 

⑦ IE表示チェック IE8表示調整(不完全ながら)、IE7は断念

⑧ 課題だったメニューのアクティブ表示を調整。
なんと、このCSSで簡単に調整可能であった。

.current-menu-item a

 

 追記:2015.3.14

導入から数回テーマの更新があった。そのつどCSSが少し崩れる。
今回の更新では、headerの画像枠がメニューにかかってしまい、marginで調整した。

.col-md-12 {
    margin: 0 0 15px;
}

また、固定ページProfileで作っている「物語の海」ページ、タイトル文字を画像で隠していたのがはみ出てしまう。
記事からタイトルを削除(タイトルなし)とした。

テーマ:Virtue by KADENCE THEMES

 

追記 2015.7.18

こちらのサイトのテーマ、一年前の作業をすっかり忘れている。
自分のメモも最低必要な項目のみ内容無しでは自分でも思い出せるかどうか。
メインブログのほうのメモリンクも貼っておこう。

 

追記 2015.8.25

  • 404Not Found のページの文字のCSSが未修正だったため、文字がかぶさってしまっていた。
    不覚にも今まで気が付かずにいた。
    CSSで クラス.alert のmarginを 上部40px とした。
    また、英語のみの表記なので、子テーマにて日本語を追加した。
  • ナヴィしたの空きがおかしくなっていたのでCSSで調整
  • portfolioで表示させている創作indexのページ、トップ画像がおかしいのでスライドやイメージを無しにして、記事中に画像を挿入に変更。また、アイキャッチ画像で表示されるHOMEの写真も、比率が正方形でないと短い方のサイズで正方形に調整されてしまうので、元画像を正方形に修正して再度アップロードし、アイキャッチに設定しなおす。

しかしこのテーマ、CSSにくせがあって(それを把握しないまま修正してるためか)、
更新のたびに毎回チェックが必要。

4 Responses

  1. shingo

    ② メニュー調整、ナビゲーションバー調整
    で質問がございます。
    #nav-main ul.sf-menu aの
    font-sizeを20pxに変更したいのですがなにをしても無効でした
    なにかわかりますでしょうか?

    ご教授ください。

    • アバター画像
      vaivie

      Shingoさま
      しばらくWPから遠ざかっていたので、詳細をすっかり忘れております…。
      えーと、CSSの変更が効かない、ということでしょうか???
      で、それはどこの部分でしょうか??
      もう少し詳しく説明いただければ、もしかしたらお役にたてるかもしれませんが…。

  2. 小野

    vaivie様

    ブログを拝見させて、いただいております。
    virtueテンプレートで、アーカイブ一覧ページ、
    例えばvaivie様のアーカイブでしたらhttps://provaiciao.jp/2019/09/16/
    のタイトルの部分が、

    日別: 2019年9月16日

    となっておりますが、オリジナルのままですと

    Daily Archives: 2019年9月16日

    です。

    素人なもので、〇〇.phpの何行目のどこどこの部分を
    こういう風に変えるというように、教えていただけますか。

    誠に勝手なお願いですが、答えていただけたら幸いです。

    • アバター画像
      vaivie

      小野様

      Virtueもサイト運営もずっと放置していたので、思い出すためにしばらくテーマファイルをにらんでみたのですが…。ただ、Virtueのアーカイブサイトの日付表示は、デフォルトでは右上のグレーのブロック内に表示されるようになっているはずで、vaivie.comではそれをはずし、カテゴリーやコメント数の並びに時計マークのアイコンを入れて表示するようにしています。

      ですので、
       日別: 2019年9月16日
      という表示にはなっていません。

      ただし、プラグインとテーマの更新を行った際、Responsivというテーマのインストールとアクティベイトを促され、ちょっと試してみたところ、アーカイブページの表示が、日別: 2019年9月16日 というふうになっていました。

      不思議なのは、私の場合「Daily Archives: 」ではなく「日別: 」となっていたことです。Responsivのテーマファイルは全く触っていない状態で、です(その後、テーマはVirtueに戻しました)。

      ですので、まずご利用(有効化している)テーマがVirtueであるかどうかもう一度ご確認ください。もしごテーマがResponsivの場合は、私はカスタマイズしていないのでよくわかりません。

      なお、Virtueのアーカイブで日付周りはテーマファイルのtemplates内にあるpost-date.php、そのほかのメタデータはentry-meta-subhead.phpです。こちらをvaivie.comのようにしたい、ということであればもう一度ご連絡ください。

      ご参考まで。

コメントを残す

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

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