レスポンシブ テーマへの移行

WordPressのテーマを レスポンシブ テーマに変更する必要が出てきた。

各テーマの特徴、問題、移行方法、等をメモしておきたい。

 

Customizr

  1. テーマのカスタマイズ性を追求したテーマ
  2. 英語版のみ
  3. 無料
  4. ビジネスサイト向けのテーマ
  5. サイドバーは右のみ、左のみ、左右、無しの4つから選択できる
    但し、全ての表示でその状態になるとは限らないので注意を。
    事前にプレビューで確認しておく必要がある。
  6. タイトル部分の固定表示、スクロール表示も可能。
    広告がこの部分に重なる場合はのチェックは必要。
    Google Adsense広告はポリシー違反になるのでこの機能はオフにする必要が有る。
  7. 非常に高度なカスタマイズが出来るが
    全て英語なので翻訳するのに手間がかかるのが問題。
    ※プレビューで見たカスタマイズの部分。
  8. 英語なので手間はかかるが解説サイトは有る。
    1. ビジネス系ホームページに最適!簡単カスタマイズでデザイン自由、WP無料テーマ「Customizr」
      簡単に説明したサイト
    2. Customizr・全体のカスタマイズ
      全てのカスタマイズ項目を完全翻訳
    3. Customizr・cssやphpのカスタマイズ
      ※前URLの続き
    4. Customizr・スライドショーの設定
      ※前URLの続き

 

 

Oxygen

Oxygen

  1. Version: 0.5.4
    Last updated: 2014年6月30日 ん~~、大丈夫か?
  2. ダウンロードサイト
  3. デモサイト
  4. 右、左、ヘッダー、フッターの4方全てにサイドバー有り
  5. コメント領域の直前用のサイドバー有り
  6. ペンギンの写真はアイキャッチ画像
  7. その下のスライドショー(カルーセルスライダーと言うらしい・・)は記事投稿の時にチェックボックスをオンで対象。
  8. 便利なテーマオプションが豊富なのが特徴
    1. Headerに広告等のウイジェット追加が可能
      Google広告の追加は出来るが、ウイジェットを2つ以上追加するのは出来ない。
  9. 日本語化してないが、テーマオプションは決して難しくない。
  10. モバイルサイトで表示した場合。キレイですね~。
    Oxygen をモバイルで表示
  11. 注意点:
    1. アイキャッチ画像を設定した記事でないと意味を持たないテーマ。
      Oxygen をパソコンで表示
    2. 左サイドバーに広告を入れると、モバイルサイト表示時に1つ目の記事の前に表示されてしまう。
      対策としてはWidget Logicプラグインでウイジェットを「wp_is_mobile()」制御すればイイ。
      制御しないと広告が並んで、ポリシー違反になる。
      Oxygen をモバイルで表示 広告が並ぶ例
  12. 参考にしたURL
    ※あまり話題にしているサイトが無いのが残念ですが。
    1. 3カラム×スライダーでおしゃれな雑誌風。ブログ・マガジン用WP無料テーマ「OXYGEN」
    2. Oxygen テーマカスタマイズ事
    3. oxygen
    4. OXYGEN

 

 

raindrops

Atahualpa -> raindrops への移行

raindrops

  1. 日本人が作成。
  2. テーマ自身に各種のカスタマイズ設定が出来るの最大の特徴。
    よってテーマのバージョンアップ時でもテーマの再設定項目が少なく済む。
  3. WordPress公式さいとより配布。
  4. カスタマイズで勘違いしてしまう箇所が一点。
    「ドキュメント」->「ページ幅」->「フルード レスポンシブ レイアウト
    これを他の設定にするとレスポンシブ非対応サイトに変わる。
    間違って、質問のコメをサイトに入れるところだった。
    素人(当サイト管理人)はコレだから困るんだよね~。(汗
  5. Atahualpaテーマからの移行は非常に簡単でした。
    アイキャッチ画像の設定も不要。※カスタマイズで設定も可能。
  6. 当テーマの使い方サイト
  7. 難点は設定に意味不明(汗)な用語が多く、困る。(素人には無理?

 

Twenty Fifteen

Twenty Fifteen

プレビュー表示

Twenty Fifteen

  1. 左サイドバー
  2. アイキャッチ画像が有れば、先頭に表示される。
    上記のプレビュー参照。
  3. モバイル・エミュレーションで表示した場合に、表の設定が悪い?と右に余白が出来る。

    Twenty Fifteen

Twenty Twelve

Twenty Twelve

当サイトをプレビュー表示した時。
トップページのみアイキャッチ画像が設定されている

Twenty Twelve で当サイトを表示した時

  1. 右サイドバー
  2. アイキャッチ画像が必要。
  3. ん~~、かなりファイルを編集しないと使えませんね。

 

Twenty Fourteen

Atahualpa -> Twenty Fourteen への移行

Twenty Fourteen






  1. タイトル部分がスクロールせずに固定表示される
    ※Google広告を使う場合は解除する必要が有る。
  2. 右サイドバー、左サイドバー使用可能
  3. ヘッダーに広告を入れる場合は、広告の上部に<BR>を2つ入れないとスクロールしないタイトルに重なってしまう。
  4. 記事本文のデフォルトのフォントサイズが小さい
  5. 注意① : 特定の記事を「この投稿を先頭に固定表示」にすると画面上部に画像領域(フィーチャードエリア)が2つできてしまう。
    この場合はこの上部を消すことが出来ない。
    Twenty Fourteen のカスタマイズ
      
    この部分(フィーチャードエリア)は記事一覧を表示をしている。
    Twenty Fourteen のカスタマイズ
     
    これを消すには
    ・ 特定の記事を「この投稿を先頭に固定表示」を無くす。
    ・ テーマのカスタマイズで以下を行う。
    「おすすめコンテンツ」 -> 「タグ名」の部分を空白にする。
    この場合は「フロントエンドにタグを表示しない。」はどちらでも同じ結果になる。
    Twenty Fourteen のカスタマイズ
      
    参考にした記事
  6. フィーチャードエリアを消すにはcontent.php の
    「<?php  twentyfourteen_post_thumbnail();  ?>」部分を
    「<?php /** twentyfourteen_post_thumbnail(); **/ ?>」に変更する。
      
  7. スマフォ等でトップで表示した時のイメージ
    アイキャッチ画像が設定されていれば表示されるらしいが、出来なかった。
    Twenty Fourteen のカスタマイズ
      
  8. スティッキーヘッダを解除する。
    style.cssの3400行目付近にある「/* Fixed Header */」検索で
    position: fixed; を position: relative; に変更する。

    /* Fixed Header */ 
    .masthead-fixed .site-header {
        position: fixed; <ー変更前
        top: 0;
    }
    Google アドセンス広告のポリシーに違反する為。

  9. サイト全体が左によっているので中央寄りにするにはstyle.cssに以下を追加。
    #page {
            margin-left: auto;
            margin-right: auto;
    }

  10. 記事のタイトルが長いとモバイル表示で不具合が出る場合が有る。
    以下の様に画面右側に余白ができてしまう。
    この場合はタイトル中に半角スペースを入れるか、(オススメできないが)タイトル自身を短くする。
    Twenty Fourteen の記事の修正前Twenty Fourteen の記事の修正後
    上部・右側はタイトル中に半角空白を追加した結果です。

  11. サイト内の検索時は抜粋表示「the_excerpt()」になっているが、アーカイブも追加する。
    content.php
    修正前: <?php if ( is_search() ) : ?>
    修正後: <?php if ( is_search() || is_archive() ) : ?>
  12. 結論 :
    テーマのバージョンアップ時に変更箇所は多い。
    1. header.php に広告スクリプトの追加
    2. 上部画像(フィーチャードエリア)の削除
      1. スティッキーヘッダを解除。
    3. サイト内の検索時は抜粋表示「the_excerpt()」になっているが、アーカイブも追加
    4. 場合により記事タイトルの修正
        
  13. 参考にしたサイト

 

STINGER5

Atahualpa -> STINGER5 への移行

STINGER5

  1. アイキャッチ画像の追加が必要
    元記事に画像があれば専用のプラグインで自動追加が可能。
  2. タグ、カテゴリーの整理
    カテゴリーは階層化したメニューにも使用されるのでキレイに設定する。
  3. 元のテーマで左サイドバー、右サイドバーを使用していたら、サイドバーの整理が必要。

 

Atahualpa

 

Catch Box

Catch Box

プレビュー

アイキャッチ画像が有れば表示される。

Catch Boxのプレビュー

Catch Boxのプレビュー

ヘッダー専用の3列のウイジェット

Catch Boxのプレビュー

  1. 説明は英語語だが、インストールするとテーマオプションは日本語になる。
    Catch Boxの日本語化されたテーマオプション
  2. 上記のテーマオプションで
    1. ファビコン URL
    2. 背景の配色
    3. レイアウト設定(右サイドバー、左サイドバー、サイドバー無し)
    4. カスタムCSSの設定
    5. スライドショー設定とその効果の設定
    6. ソーシャルリンク
    7. ヘッダー、フッターにHTML等のスクリプトを設定。広告設定も可能。
  3. メニューがヘッダーに2つ、フッターに1つ設定可能
  4. 注意点
    1. 広告を表示する場所に注意が必要。
    2. ヘッダーに広告を追加するテーマオプションは有るが表示位置がイマイチ
      Catch Box のテーマオプションでヘッダーに広告を追加した場合
    3. 広告の位置によってはモバイル表示で広告が連続してしまう。
      Catch Box のテーマをモバイルで表示した場合
  5. 投稿ページに追加された項目
    Catch Box の記事投稿時のオプション
    • Featured : サイトトップのスライダーに表示
    • Primary : スライダー画像下に表示される最新記事の箇所に画像+文章を表示
    • Secondary : 最新記事の下にタイトルとカテゴリを表示
    • Do not display : トップページにその記事は非表示
  6. 参照したサイト