WordPressテーマ『Enigma』を色々弄ってみた話。

WordPressテーマ『Enigma』を色々弄ってみた話。

コメント 0件のコメント

現在進行中のプロジェクトが手持無沙汰気味のためなんとなくブログリニューアルしました。

以前のデザインはモバイルに対応もイマイチで公式テーマのTwentyTwelveベースだったので面白みに欠ける部分がありましたが今回利用したテーマ『Enigma』はデフォルトでもjQueryでカルーセル系のプラグイン等がふんだんに使われていてゴリゴリ動く。

そして選んだ一番の理由はなんとなく興味はあったけどまだ弄ったことが無かったCSSフレームワークのBoostrapが使われている事。

いざ弄ってみたらかなり調整が楽で面白かったのでブログに書きます。

WordPressの無料テーマについて。

無料のワードプレステーマは色々なところで配布されていますが、余程のことが無い限りWordpress公式サイトで配布されているモノを使いましょう。

以前、割と有名なWEBデザイン会社が独自に配布していた無料版のテーマによろしくないスクリプトが組み込まれていて利用したウェブサイトが軒並みGoogleからペナルティを受けるという事件がありました。

しかしWordpress公式サイトの物が安心かといえばそういうわけではありませんが、人目に付くことも多くレビューしている人の分母が圧倒的に違います。

WordPress公式サイトでそこそこ良い評価を受けているテーマに関してはまず安全だと思っても問題ないと思います。

Enigmaのダウンロード

利用したい方はまず公式サイトからダウンロードします。

https://wordpress.org/themes/enigma
※日本語には対応していないため、管理画面や機能の一部は英語表記になります。

Enigmaとは日本語で『謎』という意味ですがその名の通りポップで不思議な感じの動きをします。

利用してみると自動で要素の高さ等が変わる部分などもあるのでデフォルトの設定のままだと少し使いづらいのでそういった部分の設定変更方法なども次項以降で解説します。

テーマのファイル構成

ファイル構成は一般的なindex.phpやpage.php,single.phpと、そこから読み込むcontents.php等の他に特徴的なのはWooCommerceというWordpress用のeコマース用のPHPファイルがありますが、ブログの運営をするだけなら無視して構いません。

次の階層にはimage,fonts,js,css,coreというディレクトリがあります。

デザインを弄るときはstyle.cssではなく主にcssディレクトリ内のcssを弄ることになります。

cssディレクトリ内にも10個のCSSファイルと1つのディレクトリがあります。

cssList

ソースを見てみるとstyle.css->boostrap.css->default.css->enigma-theme.css->media-responsive.cssの順で読み込まれているため、変更する際に主に使うのはenigma-theme.cssとmedia-responsive.cssの2つになります。

ファイル名からも分かりますが細かいデザイン部分はenigma-theme.cssに、メディアクエリなどを利用したレスポンシブデザインに関してはmedia-responsive.cssを弄ります。

自作のテーマではstyle.cssをゴリゴリ弄っていきますが、配布されているテーマは殆どの場合コアな部分はあまり弄らなくても済むような工夫がされている事が殆どなので配布されているテーマを利用する場合、まずはソースを見て読み込まれている順（優先順位）を確認しましょう。（本当は自作テーマでもそうするべきなんですが・・・。）

子テーマの作成

子テーマの作成についてはほかに書いてあるブログも沢山あるので省略します。

The Present Note：【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

このテーマで特に気を付けるべきなのは親テーマの中でget_template_directory_uri()で読み込まれているCSSやJSは子テーマ内ではget_stylesheet_directory_uri()に書き換えないと反映されないという点。

上記のリンクのように子テーマにすべてのファイルをコピーした場合は子テーマのfunctions.phpに2行書き加えるだけで全てのファイルの読み込みが変更可能です。

<?php
/** Theme Name	: Enigma
* Theme Core Functions and Codes
*/
	/**Includes required resources here**/
	define('WL_TEMPLATE_DIR_URI', get_template_directory_uri());
	define('WL_TEMPLATE_DIR', get_template_directory());
	define('WL_TEMPLATE_DIR_CORE' , WL_TEMPLATE_DIR . '/core');
	
	require( WL_TEMPLATE_DIR_CORE . '/menu/wlkr_bootstrap_navwalker.php' );
	require( WL_TEMPLATE_DIR_CORE . '/scripts/css_js.php' ); //Enquiring Resources here	
	require( WL_TEMPLATE_DIR_CORE . '/comment-function.php' );
	require( WL_TEMPLATE_DIR_CORE . '/flickr-widget.php' );

デフォルトではこのようになっています。

この定数（define）を子テーマのfunctions.phpに記述して上書きします。

	define('WL_TEMPLATE_DIR_URI', get_stylesheet_directory_uri());
	define('WL_TEMPLATE_DIR', get_stylesheet_directory());

WL_TEMPLATE_DIR_URIに定数としてget_template_directory_uri()を入れているのでget_stylesheet_directory_uri()に変更すれば全てのファイルに対応します。

個別に変更したい場合は個別に書き換える必要があるので親テーマ内のディレクトリは全てコピーした方が楽かもしれません。

変更後は少しファイルを弄ってみて問題なく変更されているのを確認したらデザインの変更にかかります。

デザインの変更

海外（英語圏）のウェブサイトに比べて日本語のウェブサイトはどちらかというと1ページに色々な情報を隙間なく詰め込む傾向があります。

EbayやAmazonよりもヤフオクや楽天がごちゃごちゃして見えるのもそういった傾向のあらわれだと勝手に推測しています。

好みの問題もあるかもしれませんが英語向けに作られたテンプレートの多くは日本人の感覚だとマージンやパディングが無駄に広く感じる事が多いと思く、Wordpress公式サイトにあるテーマを日本語のウェブサイトに利用する際はマージンやパディングの調整が必要になるとおもいます。

※比較画像
compare

上の比較画像ではスペーシングだけではなくカラム数も思い切って増やしましたが、あまりごちゃごちゃしているようには感じません。

Boostrapのおかげでスペースを省いたくらいではデザインが崩れたりはしないのでHeaderやFooter、PageやPostの余計なスペースもゴリゴリ削りましょう。

ちなみに、カラム数の変更を行うには2か所変更する必要があります。

まずは\enigma\js\carouFredSel-6.2.1ディレクトリ内にあるcaroufredsel-element.jsを書き換えます。

//デフォルト設定  

var wl_caroufredsel = function () {
				 
			   // jQuery CarouFredSel  For blog               
				
				jQuery('#enigma_blog_section').wl_caroufredsel({
					width: '100%',
                    responsive: true,
                   scroll : {
						items : 1,//スクロールするアイテム数
						duration : 2000,//スクロールにかかる時間
						timeoutDuration : 2000//次の処理に移るまでの時間
					},
                    circular: true,
					direction: 'left',//スクロールの方向
                    items: {
						height: 'variable',//アイテムの高さ（可変）
                        visible: {
                            min: 1,//表示する最少アイテム数
                            max: 3 //最大アイテム数
                        },
						
                    },
                     prev: '#port-prev',
                    next: '#port-next',
                    auto: {
                        play: true//自動スクロールON
                    }
                });

※変更後

  var wl_caroufredsel = function () {
				 
			   // jQuery CarouFredSel  For blog               
				
				jQuery('#enigma_blog_section').wl_caroufredsel({
					width: '100%',
                    responsive: true,
                   scroll : {
						items : 1,
						duration : 500,
						timeoutDuration : 500
					},
                    circular: true,
					direction: 'left',
                    items: {
						height: 'variable',
                        visible: {
                            min: 1,
                            max: 4
                        },
						
                    },
                     prev: '#port-prev',
                    next: '#port-next',
                    auto: {
                        play: false
                    }
                });

表示数を増やすにはvisibleのmaxの項目を増やしましょう。

ついでに高さが可変の時に自動スクロールがONだと以降の要素が勝手に動くのがわずらわしいので高さを固定にするか、自動スクロールを切る事をお勧めします。

最大表示数は増えましたが、要素の幅が33.333333%でoverflowもおそらくhiddenに設定されているため、見えません。

ここはBoostrapのCSS内のclass『col-md-4』のwidthで変更可能ですが、これは弄らずにmedia-responsive.phpに上書きして処理します。

表示したいカラム数に応じてパーセンテージを調節します。

大まかな部分の変更はこれくらいになります。

私自身まだ微調整を終えていないので何か問題にぶつかり次第解決の後、追記致します。

ひとこと

誰かの作ったテーマをハックするのはいい勉強になりますね。

特にメンテのしやすいコードの書き方とか物凄く。

ちなみにサイトタイトルも『うぇぶ屋がとんだ』からドメイン名の『cityJumperWEB.com』に変更しました。

けどFacebookのページタイトルが何故かローマ字表記に変更できない・・・。

コメントを残す

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