-
レスポンシブ テーマへの移行
WordPressのテーマを レスポンシブ テーマに変更する必要が出てきた。
各テーマの特徴、問題、移行方法、等をメモしておきたい。
Customizr
- テーマのカスタマイズ性を追求したテーマ
- 英語版のみ
- 無料
- ビジネスサイト向けのテーマ
- サイドバーは右のみ、左のみ、左右、無しの4つから選択できる
但し、全ての表示でその状態になるとは限らないので注意を。
事前にプレビューで確認しておく必要がある。 - タイトル部分の固定表示、スクロール表示も可能。
広告がこの部分に重なる場合はのチェックは必要。
Google Adsense広告はポリシー違反になるのでこの機能はオフにする必要が有る。 - 非常に高度なカスタマイズが出来るが
全て英語なので翻訳するのに手間がかかるのが問題。
※プレビューで見たカスタマイズの部分。 - 英語なので手間はかかるが解説サイトは有る。
- ビジネス系ホームページに最適!簡単カスタマイズでデザイン自由、WP無料テーマ「Customizr」
簡単に説明したサイト - Customizr・全体のカスタマイズ
全てのカスタマイズ項目を完全翻訳 - Customizr・cssやphpのカスタマイズ
※前URLの続き - Customizr・スライドショーの設定
※前URLの続き
- ビジネス系ホームページに最適!簡単カスタマイズでデザイン自由、WP無料テーマ「Customizr」
Oxygen
- Version: 0.5.4
Last updated: 2014年6月30日 ん~~、大丈夫か? - ダウンロードサイト
- デモサイト
- 右、左、ヘッダー、フッターの4方全てにサイドバー有り
- コメント領域の直前用のサイドバー有り
- ペンギンの写真はアイキャッチ画像
- その下のスライドショー(カルーセルスライダーと言うらしい・・)は記事投稿の時にチェックボックスをオンで対象。
- 便利なテーマオプションが豊富なのが特徴
- Headerに広告等のウイジェット追加が可能
Google広告の追加は出来るが、ウイジェットを2つ以上追加するのは出来ない。
- Headerに広告等のウイジェット追加が可能
- 日本語化してないが、テーマオプションは決して難しくない。
- モバイルサイトで表示した場合。キレイですね~。
- 注意点:
- アイキャッチ画像を設定した記事でないと意味を持たないテーマ。
- 左サイドバーに広告を入れると、モバイルサイト表示時に1つ目の記事の前に表示されてしまう。
対策としてはWidget Logicプラグインでウイジェットを「wp_is_mobile()」制御すればイイ。
制御しないと広告が並んで、ポリシー違反になる。
- アイキャッチ画像を設定した記事でないと意味を持たないテーマ。
- 参考にしたURL
※あまり話題にしているサイトが無いのが残念ですが。
raindrops
Atahualpa -> raindrops への移行
- 日本人が作成。
- テーマ自身に各種のカスタマイズ設定が出来るの最大の特徴。
よってテーマのバージョンアップ時でもテーマの再設定項目が少なく済む。 - WordPress公式さいとより配布。
- カスタマイズで勘違いしてしまう箇所が一点。
「ドキュメント」->「ページ幅」->「フルード レスポンシブ レイアウト」
これを他の設定にするとレスポンシブ非対応サイトに変わる。
間違って、質問のコメをサイトに入れるところだった。
素人(当サイト管理人)はコレだから困るんだよね~。(汗 - Atahualpaテーマからの移行は非常に簡単でした。
アイキャッチ画像の設定も不要。※カスタマイズで設定も可能。 - 当テーマの使い方サイト
- 難点は設定に意味不明(汗)な用語が多く、困る。(素人には無理?
Twenty Fifteen
プレビュー表示
- 左サイドバー
- アイキャッチ画像が有れば、先頭に表示される。
上記のプレビュー参照。 - モバイル・エミュレーションで表示した場合に、表の設定が悪い?と右に余白が出来る。
Twenty Twelve
当サイトをプレビュー表示した時。
トップページのみアイキャッチ画像が設定されている- 右サイドバー
- アイキャッチ画像が必要。
- ん~~、かなりファイルを編集しないと使えませんね。
Twenty Fourteen
Atahualpa -> Twenty Fourteen への移行
- タイトル部分がスクロールせずに固定表示される
※Google広告を使う場合は解除する必要が有る。 - 右サイドバー、左サイドバー使用可能
- ヘッダーに広告を入れる場合は、広告の上部に<BR>を2つ入れないとスクロールしないタイトルに重なってしまう。
- 記事本文のデフォルトのフォントサイズが小さい
- 注意① : 特定の記事を「この投稿を先頭に固定表示」にすると画面上部に画像領域(フィーチャードエリア)が2つできてしまう。
この場合はこの上部を消すことが出来ない。
この部分(フィーチャードエリア)は記事一覧を表示をしている。
これを消すには
・ 特定の記事を「この投稿を先頭に固定表示」を無くす。
・ テーマのカスタマイズで以下を行う。
「おすすめコンテンツ」 -> 「タグ名」の部分を空白にする。
この場合は「フロントエンドにタグを表示しない。」はどちらでも同じ結果になる。参考にした記事
- フィーチャードエリアを消すにはcontent.php の
「<?php twentyfourteen_post_thumbnail(); ?>」部分を
「<?php /** twentyfourteen_post_thumbnail(); **/ ?>」に変更する。 - スマフォ等でトップで表示した時のイメージ
アイキャッチ画像が設定されていれば表示されるらしいが、出来なかった。
- スティッキーヘッダを解除する。
style.cssの3400行目付近にある「/* Fixed Header */」検索で
position: fixed; を position: relative; に変更する。/* Fixed Header */
.masthead-fixed .site-header {
position: fixed; <ー変更前
top: 0;
}
Google アドセンス広告のポリシーに違反する為。 -
サイト全体が左によっているので中央寄りにするにはstyle.cssに以下を追加。
#page {
margin-left: auto;
margin-right: auto;
} -
記事のタイトルが長いとモバイル表示で不具合が出る場合が有る。
以下の様に画面右側に余白ができてしまう。
この場合はタイトル中に半角スペースを入れるか、(オススメできないが)タイトル自身を短くする。
上部・右側はタイトル中に半角空白を追加した結果です。 - サイト内の検索時は抜粋表示「the_excerpt()」になっているが、アーカイブも追加する。
content.php
修正前: <?php if ( is_search() ) : ?>
修正後: <?php if ( is_search() || is_archive() ) : ?> - 結論 :
テーマのバージョンアップ時に変更箇所は多い。- header.php に広告スクリプトの追加
- 上部画像(フィーチャードエリア)の削除
- スティッキーヘッダを解除。
- サイト内の検索時は抜粋表示「the_excerpt()」になっているが、アーカイブも追加
- 場合により記事タイトルの修正
- 参考にしたサイト
STINGER5
Atahualpa -> STINGER5 への移行
- アイキャッチ画像の追加が必要
元記事に画像があれば専用のプラグインで自動追加が可能。 - タグ、カテゴリーの整理
カテゴリーは階層化したメニューにも使用されるのでキレイに設定する。 - 元のテーマで左サイドバー、右サイドバーを使用していたら、サイドバーの整理が必要。
Catch Box
プレビュー
アイキャッチ画像が有れば表示される。
ヘッダー専用の3列のウイジェット
- 説明は英語語だが、インストールするとテーマオプションは日本語になる。
- 上記のテーマオプションで
- ファビコン URL
- 背景の配色
- レイアウト設定(右サイドバー、左サイドバー、サイドバー無し)
- カスタムCSSの設定
- スライドショー設定とその効果の設定
- ソーシャルリンク
- ヘッダー、フッターにHTML等のスクリプトを設定。広告設定も可能。
- メニューがヘッダーに2つ、フッターに1つ設定可能
- 注意点
- 広告を表示する場所に注意が必要。
- ヘッダーに広告を追加するテーマオプションは有るが表示位置がイマイチ
- 広告の位置によってはモバイル表示で広告が連続してしまう。
- 投稿ページに追加された項目
- Featured : サイトトップのスライダーに表示
- Primary : スライダー画像下に表示される最新記事の箇所に画像+文章を表示
- Secondary : 最新記事の下にタイトルとカテゴリを表示
- Do not display : トップページにその記事は非表示
- 参照したサイト