八王子で婚活や女性を応援する「所縁の会」のWebサイトを作らせていただきました。そのときに色々なテーマを試した結果、i-MAXというちょっとかっこいいテーマを見つけました。
レスポンシブデザインやスライダー、ぱんくず機能も付いていて機能も充実しています。このi-MAXについてご紹介します。
i-MAXをインストールする
i-MAXの基本的なカスタマイズ方法について書きたいと思います。まず、インストールから。
ダッシュボード 外観＞テーマ 新規登録で
i-max と入力してリターン
i-MAXテーマが表示されるので、インストール をクリックします。
有効化 をクリック
テーマ一覧ページの上部にこのように表示されます。i-MAXには必要なプラグインがあるようなので、
Begin Installing plugins をクリック
必要なプラグインは2つあるので一つずつ、Install をクリックして
Activate します。
これで準備が出来ましたので、表画面を見ると
このようにi-MAXテーマで表示されました(^^)/
スライダー部分をカスタマイズしてみる
このテーマで一番目に付くのは4枚あるスライダーです。この部分をカスタマイズしてみます。
ダッシュボード 外観＞カスタマイズ をクリック。
表示されたメニューから Slider をクリック
スライダーは4つあります。まず Slide 1 をクリックしてみます。
入力欄がこのようにありますがこれは、
このように対応しています。試しにちょっと変更してみます。
こんな感じに入力すると
右側にプレビューでどのようになるか表示されるので分かりやすいです。
これで良ければ、
保存して公開 をクリックします。
表画面を見ると、
変更されていました。
- 写真は ぱくたそさんのものを使わせていただきましたm(_ _)m
電話番号、メールアドレス、サイトのロゴ、基本色、SNSボタンのカスタマイズ
電話番号、メールアドレス、サイトのロゴ、基本色、SNSボタンのカスタマイズをします。
ダッシュボード 外観＞カスタマイズ をクリック。
Basic Settings をクリック。ここで電話番号、メールアドレス、サイトのロゴを指定します。
Layout Options をクリック。ここで基本的な色を指定します。
Social Links をクリック。ここで各種SNSボタンなどの設定をします。
何か文字が入っているとボタンが表示される仕組みです。ここでFacebookページのURLやTwitterのURLなどを入力します。特にリンクすべきページが無ければ # を削除します。
変更を行った場合は、
保存して公開 をクリックして保存することを忘れないようにします。
テーマ i-MAXを使ってつくったサイト「所縁の会」
このような感じで実際につくったサイトがこちらになります。
i-MAXの子テーマを作ってCSSで色を変えたり、blog「WordPress wp-content/languages/ja.po で翻訳されている日本語を変えたいとき」に書いた方法で文字を置き換えたりしました。
Jetpackを入れているのですがFacebookでシェアしたときに画像が空白になってしまう場合があったので、子テーマのfunctions.phpに
/**
* Adds default OpenGraph image.
* Christoph Nahr 2014-02-28
* @param array $tags Array of OpenGraph tags.
* @return Specified array, possibly modified.
*/
function add_default_image( $tags ) {
// replace blank Jetpack default image with site header
if ( $tags['og:image'][0] == "https://s0.wp.com/i/blank.jpg" ) {
unset( $tags['og:image'][0] );
$tags['og:image'][0] = 'http://yukari.attackline.jp/wp-content/uploads/2015/06/ogpimage.jpg';
}
// always remove useless HTTPS image tags
unset( $tags['og:image:secure_url'] );
return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );
以前参考にさせてもらったfunctionをちょっと改造した、こんな記述を入れました。
i-MAXで作ったWebサイト 所縁(ゆかり)の会 も是非ご覧くださいm(_ _)m
コメント