CMSカテゴリー記事一覧 | 3ページ目 (4ページ中)

3分の動画で学ぶ！無料で使えるスマホ対応WordPressテーマ【Lightning】のインストール方法＆カスタマイズ

Lightning & BizVektor アドベントカレンダー３日目です！

「WordPress公式ディレクトリ登録テーマ Lightning & BizVektor 及びVektor,Inc. リリースプラグインに関するアドベントカレンダー」という、非常にニッチ(!?)なアドベントカレンダーがありまして、Lightning開発者の石川さんがブログを書く方を募集していたので飛び入りで書きます！

【WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016】
http://www.adventar.org/calendars/1716

２日目の石川さんから勝手にバトンを引き継いで、３日目の今回はLightningのインストール方法とカスタマイズ方法を動画でサクッと紹介しようと思います。

動画の合計時間は約３分。忙しい方でもサッと視聴いただき、Lightningの良さを感じてもらえたら嬉しいです。

昨日(２日目)の石川さんの記事はこちら
WordPressでCTAを簡単に設置できる機能を強化！ウィジェットでも使用して集客につなげよう！

WordPress公式テーマ Lightningとは

動画を紹介する前にちょっとLightningの紹介を。

Lightningテーマは『株式会社ベクトル（Vektor,Inc.）』が提供するWordPress公式ディレクトリテーマです。

Lightning

特徴は、以下の通り。

専門知識の無い初心者でも、スマホ対応（レスポンシブ対応）したウェブサイトが簡単に作れてしまう！
オンラインで簡単に色やロゴを変えられる
推奨プラグインを入れることで、より幅広い設定が可能
Bootstrapベースのため、ウェブ制作を生業にしている方でもカスタマイズがしやすい

一言で言うと『初心者から上級者まで誰にでも使いやすく、カスタマイズし易い公式ディレクトリテーマ』です。

今回、その特徴を端的にお伝えするためにインストールからカスタマイズまでの操作動画を作ってみました。

Lightning のインストール方法

では、早速Lightningテーマのインストール方法からスタート。

なお、既にWordPressをインストールしてあるものとして話を進めます。

インストールはWordPressの管理画面から簡単に行えます。

字幕をONにすると動画下部に操作説明が表示されます。

https://www.youtube.com/watch?v=9i8y0N8iUjw?hl=ja_JP&version=3&cc_load_policy=1

Lightning のカスタマイズ

ヘッダーのロゴ、キーカラー、トップページのスライドショーを変更してみます。

ツールバーのカスタマイズから簡単に色々な変更が出来てしまうという素晴らしさ！

字幕をONにすると動画下部に操作説明が表示されます。

https://www.youtube.com/watch?v=qu8hVzkkTPo?hl=ja_JP&version=3&cc_load_policy=1

すごいぞLightning

いやぁ簡単ですね！たった３分でここまで出来るLightningテーマ！すごい！

今回は、Lightningのほんの一部のカスタマイズしか紹介していません。

他の部分のカスタマイズはぜひご自身で試してみてくださいね。

では、４日目の誰かにバトンタッチ！

【WP】［Beaver Builder － WordPressページビルダー］プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder－ WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを２カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか！と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

［Beaver Builder-WordPressページビルダー］のプラグインページはこちら

Beaver Builderで何ができるのか？

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。（翻訳してくださった方ありがとうございますm(_ _)m）

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ？」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

<script>
<?php
    
echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(
    'ajaxNonce'                     => wp_create_nonce( 'fl_ajax_update' ),
    'colorPresets'                  => FLBuilderModel::get_color_presets(),
    'customImageSizeTitles'         => apply_filters( 'image_size_names_choose', array() ),
    'debug'                         => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),
    'enabledTemplates'              => 'core',
    'help'                          => FLBuilderModel::get_help_button_settings(),
    'homeUrl'                       => home_url(),
    'isRtl'                         => is_rtl(),
    'isUserTemplate'                => false,
    'lite'                          => true === FL_BUILDER_LITE,
    'modSecFix'                     => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),
    'newUser'                       => FLBuilderModel::is_new_user(),
    'postId'                        => $post_id,
    'postStatus'                    => get_post_status(),
    'postType'                      => get_post_type(),
    'simpleUi'                      => $simple_ui ? true : false,
    'upgradeUrl'                    => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),
    'userCanEditGlobalTemplates'    => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),
    'userCanPublish'                => current_user_can('publish_posts'),
    'userTemplateType'              => FLBuilderModel::get_user_template_type(),
    'googleFontsUrl'                => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='
) ) ) . ';';

<?php

echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(

'ajaxNonce' => wp_create_nonce( 'fl_ajax_update' ),

'colorPresets' => FLBuilderModel::get_color_presets(),

'customImageSizeTitles' => apply_filters( 'image_size_names_choose', array() ),

'debug' => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),

'enabledTemplates' => 'core',

'help' => FLBuilderModel::get_help_button_settings(),

'homeUrl' => home_url(),

'isRtl' => is_rtl(),

'isUserTemplate' => false,

'lite' => true === FL_BUILDER_LITE,

'modSecFix' => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),

'newUser' => FLBuilderModel::is_new_user(),

'postId' => $post_id,

'postStatus' => get_post_status(),

'postType' => get_post_type(),

'simpleUi' => $simple_ui ? true : false,

'upgradeUrl' => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),

'userCanEditGlobalTemplates' => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),

'userCanPublish' => current_user_can('publish_posts'),

'userTemplateType' => FLBuilderModel::get_user_template_type(),

'googleFontsUrl' => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='

) ) ) . ';';

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

// テンプレート選択画面を非表示にする
add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');
function onocom_set_pagebuilder_setting($settings) {
    
    if( isset($settings["enabledTemplates"]) ) {
        $settings["enabledTemplates"] = "disabled";
    }
    
    return $settings;
}

// テンプレート選択画面を非表示にする

add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');

function onocom_set_pagebuilder_setting($settings) {

if( isset($settings["enabledTemplates"]) ) {

$settings["enabledTemplates"] = "disabled";

}

return $settings;

}

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

/* ツールバーのボタン等を非表示にするCSS(多分動く) */
.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */
.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */
.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */
.fl-builder-blocks .fl-builder-modules-cta   /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */
{
    display: none; 
}

/* ツールバーのボタン等を非表示にするCSS(多分動く) */

.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */

.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */

.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */

.fl-builder-blocks .fl-builder-modules-cta /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */

{

display: none;

}

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。

【mautic】concrete5のユーザ登録時にmauticのコンタクトに登録する方法

毎月、mautic meetup nagoya勉強会をベースキャンプ名古屋で開催しています。

７月の勉強会は【Mautic Meetup Nagoya #4 「Contacts は奥が深い」】というタイトルの勉強会で、コンタクト(旧称：リード)の使い方について学びました。

そこでconcrete5とmauticを連携させる簡単なデモを実施しましたので、実装方法を残しておきます。

やること

concrete5のユーザ登録時にユーザ情報をmauticと連動させる
- 連動する情報は以下のとおり。
  - メールアドレス（ email ）
  - 姓（ lastname ）、名（ firstname ）
  - 会社名（ company ）

concrete5は誰でも認証なしにユーザ登録出来る設定にしています。

mautic側の設定

mauticのコンタクトを外部から操作するには、コンタクトフィールドの設定が必要です。

1. 右上の歯車マークをクリックして「Custom Fields」を選択します。

mauticのフィールド設定

2. First Nameを選択して詳細画面を開きます

First Name選択

3. 右側に表示されているPublicly updatable を「はい」に設定します

Publicly updatable
Publicly updatable を「はい」に設定します

この設定をすることで外部からのコンタクトの設定値を更新出来るようになります。

4. 連携予定のその他のコンタクトフィールドも同様に設定します。

メールアドレス（ email ）
姓（ lastname ）、名（ firstname ）
会社名（ company ）

concrete5側の設定

1. 誰でもユーザ登録できるようにします

concrete5ユーザ登録の設定

2. ユーザ属性を追加します

ユーザ属性追加

3. ユーザ登録画面にトラッキングコードを挿入します

application/single_pages ディレクトリに、以下のファイル（register.php）をダウンロードします。

gist – register.php

	<?php defined('C5_EXECUTE') or die("Access Denied.");

	$token = \Core::make('Concrete\Core\Validation\CSRF\Token');
	?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	<div class="page-header">
	<h1><?php echo t('Site Registration')?></h1>
	<p>Mauticとの連携を試みます！</p>
	</div>
	</div>
	</div>
	<?php
	$attribs = UserAttributeKey::getRegistrationList();
	$ma_tag = "";
	if($registerSuccess) { ?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	<?php switch($registerSuccess) {
	case "registered":
	?>
	<p><strong><?php echo $successMsg ?></strong><br/><br/>
	<a href="<?php echo $view->url('/')?>"><?php echo t('Return to Home')?></a></p>
	<?php
	break;
	case "validate":
	?>
	<p><?php echo $successMsg[0] ?></p>
	<p><?php echo $successMsg[1] ?></p>
	<p><a href="<?php echo $view->url('/')?>"><?php echo t('Return to Home')?></a></p>
	<?php
	break;
	case "pending":
	?>
	<p><?php echo $successMsg ?></p>
	<p><a href="<?php echo $view->url('/')?>"><?php echo t('Return to Home')?></a></p>
	<?php
	break;



	}

	$u = new User();
	if (is_object($u) && $u->checkLogin()) {
	$uinfo = UserInfo::getByID($u->uID);
	$email = $uinfo->getUserEmail();
	$first_name = $uinfo->getAttribute("first_name");
	$last_name = $uinfo->getAttribute("last_name");
	$company = $uinfo->getAttribute("company");

	$ma_tag = "{email: '" . $email . "', firstname: '" . $first_name . "', lastname: '" . $last_name . "', company: '" . $company . "'}";
	}

	?>

	</div>
	</div>
	<?php
	} else { ?>
	<form method="post" action="<?php echo $view->url('/register', 'do_register')?>" class="form-stacked">
	<?php $token->output('register.do_register') ?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	<fieldset>
	<legend><?php echo t('Your Details')?></legend>
	<?php
	if ($displayUserName) {
	?>
	<div class="form-group">
	<?php echo $form->label('uName',t('Username'))?>
	<?php echo $form->text('uName')?>
	</div>
	<?php
	}
	?>
	<div class="form-group">
	<?php echo $form->label('uEmail',t('Email Address'))?>
	<?php echo $form->text('uEmail')?>
	</div>
	<div class="form-group">
	<?php echo $form->label('uPassword',t('Password'))?>
	<?php echo $form->password('uPassword',array('autocomplete' => 'off'))?>
	</div>
	<div class="form-group">
	<?php echo $form->label('uPasswordConfirm',t('Confirm Password'))?>
	<?php echo $form->password('uPasswordConfirm',array('autocomplete' => 'off'))?>
	</div>

	</fieldset>
	</div>
	</div>
	<?php
	if (count($attribs) > 0) {
	?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	<fieldset>
	<legend><?php echo t('Options')?></legend>
	<?php
	$af = Loader::helper('form/attribute');
	foreach($attribs as $ak) {
	echo $af->display($ak, $ak->isAttributeKeyRequiredOnRegister());
	}
	?>
	</fieldset>
	</div>
	</div>
	<?php
	}
	if (Config::get('concrete.user.registration.captcha')) {
	?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1 ">

	<div class="form-group">
	<?php
	$captcha = Loader::helper('validation/captcha');
	echo $captcha->label();
	?>
	<?php
	$captcha->showInput();
	$captcha->display();
	?>
	</div>
	</div>
	</div>

	<?php } ?>
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
	<div class="form-actions">
	<?php echo $form->hidden('rcID', $rcID); ?>
	<?php echo $form->submit('register', t('Register') . ' >', array('class' => 'btn-lg btn-primary'))?>
	</div>
	</div>
	</div>
	</form>

	<?php
	}


	?>
	<script>
	(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
	w[n]=w[n]\|\|function(){(w[n].q=w[n].q\|\|[]).push(arguments)},a=d.createElement(t),
	m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
	})(window,document,'script','http://example.com/mtc.js','mt');
	<?php if( $ma_tag ) : ?>
	mt('send', 'pageview', <?php echo $ma_tag; ?>);
	<?php else: ?>
	mt('send', 'pageview');
	<?php endif; ?>
	</script>

view raw

register.php

hosted with ❤ by GitHub

http://example.com/mtc.js

1	http://example.com/mtc.js

ソースの簡単に説明

以下の部分で登録完了した方の情報をトラッキングコードに含めています。

$ma_tag = "";
if($registerSuccess) { ?>
～ 中略 ～
	$u = new User();
	if (is_object($u) && $u->checkLogin()) {
		$uinfo = UserInfo::getByID($u->uID);
		$email =  $uinfo->getUserEmail();
		$first_name =  $uinfo->getAttribute("first_name");
		$last_name =  $uinfo->getAttribute("last_name");
		$company =  $uinfo->getAttribute("company");
		
		$ma_tag = "{email: '" . $email . "', firstname: '" . $first_name . "', lastname: '" . $last_name . "', company: '" . $company . "'}";
	}
～ 中略 ～
}
～ 中略 ～
?>
～ 中略 ～
// ココでトラッキングコードを出力（登録完了したユーザは、登録情報も含めて送信する）
<script>
    (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','http://example.com/mtc.js','mt');
	<?php if( $ma_tag ) : ?>
		mt('send', 'pageview', <?php echo $ma_tag; ?>);
	<?php else: ?>
		mt('send', 'pageview');
	<?php endif; ?>
</script>
～ 中略 ～

$ma_tag = "";

if($registerSuccess) { ?>

～中略～

$u = new User();

if (is_object($u) && $u->checkLogin()) {

$uinfo = UserInfo::getByID($u->uID);

$email = $uinfo->getUserEmail();

$first_name = $uinfo->getAttribute("first_name");

$last_name = $uinfo->getAttribute("last_name");

$company = $uinfo->getAttribute("company");

$ma_tag = "{email: '" . $email . "', firstname: '" . $first_name . "', lastname: '" . $last_name . "', company: '" . $company . "'}";

}

～中略～

}

～中略～

// ココでトラッキングコードを出力（登録完了したユーザは、登録情報も含めて送信する）

(function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;

w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),

m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)

})(window,document,'script','http://example.com/mtc.js','mt');

<?php if( $ma_tag ) : ?>

mt('send', 'pageview', <?php echo $ma_tag; ?>);

<?php else: ?>

mt('send', 'pageview');

<?php endif; ?>

</script>

～中略～

以上でユーザ登録をしてくれた方を、mautic に連携出来るようになります。

[WordPress]WordPress Beta Testerプラグインを利用してWordPressの開発最新版(WordPress 4.5 RC)をテスト環境で簡単に試す方法

WordPressの最新版のVersion 4.5が4月12日頃にリリースされるそうです。開発は順調に進んでいるようです。

WordPress4.5のリリースが待てないという方はこの方法を使って先行して動作確認を行うことが出来ます。

注意

紹介している方法は必ずテスト環境でお試しください。本番サイトでこの方法を採ることはオススメしません。

WordPress Beta Tester プラグインを有効化

「WordPress Beta Tester」プラグインをインストールして、有効化します。

https://wordpress.org/plugins/wordpress-beta-tester/

WordPress Beta Tester プラグインの設定

ツール→Beta Testingをクリックして設定画面を表示します。
続いて、「最新版ナイトリービルド」をチェックして変更を保存します。
これで準備OKです。

WordPressの最新版ナイトリービルドに更新

ダッシュボード→更新をクリックしてWordPress の更新画面を開きます。

今すぐ更新をクリックしてWordPressをアップデートします。

無事にアップデートされました。

まとめ

めっちゃ簡単でしたね。

WordPressはガンガン開発が進んでいるCMSです。

開発の様子も公開されているので興味が有る方は覗いてみてくださいね。

https://make.wordpress.org/core/

WordPress 4.5でリリースされる機能の概要が以下の記事で紹介されています。

WordPress 4.5 ベータ 1

https://ja.wordpress.org/2016/02/27/wordpress-4-5-beta-1/

【concrete5】concrete5 ver5.7以降で最速でテーマを作る方法

WordPressでもconcrete5でもそうですが、テーマを作るぜ！という話をした時に尻込みしてしまう方が結構います。（特にデザイナーさんに多いような）
理由は、「プログラム言語を怖い。PHP怖い。」という答えが私の周りには多かったです。

安心してください。
concrete5はWordPressよりもテーマの作り方が簡単です。
最初はおまじないだと思っておいて後から少しずつ理解していけばOK。

デザイナーさんでも怖がることが無いように、最低限必要なファイルだけでサクッとテーマを作って行こうと思います。

最低限必要なファイルとは

以下の3ファイルだけです。
しかもdescription.txtとthumbnail.pngはただのテキストファイルと画像です。
デザイナーさんでもこれなら触れますね。

3のdefault.phpだけはプログラムですが、基本HTMLファイルですので気を楽にしてください。

1 description.txt

テーマの説明テキストファイル。

2 thumbnail.png

テーマの画面キャプチャ。360×270のPNG形式。

3 default.php

デフォルトのテーマファイル本体

たった3つでテーマができる！素敵concrete5！
それでは、順を追ってテーマを作っていきます。

前提：静的HTMLを作る

まずはconcrete5云々の前に、HTML+CSS+JS等を使って静的なサイトを作ります。
作ってない方で、テーマ学習をしたい方は適当なHTMLテンプレートをググッて探しておきましょう。

1: テーマを格納するフォルダを用意しよう

application/themes フォルダの中に、適当なフォルダを作りましょう。

例： application/themes/sample-theme

2: description.txtを作る

空のdescription.txtを作成した後、以下の2行を追加します。
1行目はテーマ名。2行目はテーマの説明です。
必ずUTF-8で保存しましょう。
description.txtの内容

テーマ名
このテーマの説明を書きます。
補足
concrete5 5.7以降は、page_theme.phpファイルを作って getThemeName() と getThemeDescription() というメソッドにテーマ名やテーマの説明を記述できるようになりました。
今回はできるだけ簡単に済ませたいので、上記の方法を採ります。

3: thumbnail.pngを作る

360px×270pxのPNG画像を作ります。テーマをひと目で認識できるようなキャプチャ画像が良いでしょう。

以下の画像を右クリックして保存頂いてもOKです。

4: HTMLファイルをdefault.phpにリネームする

前提として作ってあるHTMLファイルをリネームして「default.php」にします。

5: おまじないをHTMLファイルにおまじないを書く。

・default.phpの一行目

<?php defined(‘C5_EXECUTE’) or die(_(“Access Denied.”)); ?>

直接テーマファイルをコールさせないためのおまじないで、今後新たにテンプレートファイルを追加するときなどは必ず上記を書くようにしましょう。

・スタイルシートや画像の読み込みの部分

<?php echo $this->getThemePath(); ?>

1	<?php echo $this->getThemePath(); ?>

各ファイルへのパスを出力してくれるおまじないです。以下のように記述します。

<link href="<?php echo $this->getThemePath(); ?>/style.css" rel="stylesheet">
<img src="<?php echo $this->getThemePath(); ?>/images/common/logo.png" alt="logo">

1 2	<link href="<?php echo $this->getThemePath(); ?>/style.css" rel="stylesheet"> <img src="<?php echo $this->getThemePath(); ?>/images/common/logo.png" alt="logo">

・head開始タグ内

<?php Loader::element('header_required'); ?>

1	<?php Loader::element('header_required'); ?>

タイトル・文字セット等を自動的に出力してくれます。
なので、<title>タグ・<meta charset=”utf-8″>は削除してOKです。

・body終了タグの直前

<?php Loader::element('footer_required'); ?>

1	<?php Loader::element('footer_required'); ?>

管理バーやJSの出力をしてくれます。

・body開始タグ直後、Loader::element(‘footer_required’)の直前

bodyの開始タグ直後と終了タグ直前に以下を記載します。
divの閉じタグはLoader::element(‘footer_required’)よりも下に記載します。

<body>
<div class="<?php echo $c->getPageWrapperClass()?>">
・・・
</div>
<?php Loader::element('footer_required'); ?>
</body>

<body>

<div class="<?php echo $c->getPageWrapperClass()?>">

・・・

</div>

<?php Loader::element('footer_required'); ?>

</body>

この記述をすることで、concrete5が適切なCSSクラスを出力できるようになり、concrete5のインターフェースが正しく動作するようになります。

例えばconcrete5にはコンポーザーという機能が有りますが、上記を記述しておかないとコンポーザーが表示されない等の問題が発生します。
案外見落としがちなので要チェックです！
かくいう私もコンポーザーが動作しなくて、プログラムとずっとにらめっこしていた経験が有ります。

・エリアを指定する

concrete5はエリアにブロックを配置してサイトを作っています。
テーマファイルには難しいプログラムを書く必要は無く、エリアの場所だけを指定してあげます。

各ページのコンテンツを書くエリアを定義するために以下のコードを書きます。

<?php
$a = new Area('【エリアの名前】');
$a->display($c);
?>

<?php

$a = new Area('【エリアの名前】');

$a->display($c);

・グローバルエリアを指定する

ページ共通のグローバルエリアを設置するために以下のコードを書きます。

<?php
$a = new GlobalArea('【エリアの名前】');
$a->display();
?>

<?php

$a = new GlobalArea('【エリアの名前】');

$a->display();

まとめ

テーマ作成、簡単でしたでしょうか？

ちょっと文章ばかりでは理解しづらい。という方、以下にテーマの作り方が動画と一緒に上がっていますので参考にしてください。

http://concrete5-japan.org/help/5-7/tutorials/theme-design-basic-seminar/

また、テーマ制作で陥りやすい落とし穴というページも参考になります。

http://concrete5-japan.org/help/5-7/developer/designing-for-concrete5/building-a-concrete5-theme/common-pitfalls/

蛇足

先日のコンなご（concrete5名古屋ユーザーグループ）でKatzさんがconcrete5のコーディングガイドラインを紹介していました。
このコーディングガイドラインには、concrete5におけるコーディングで●●をしてはいけない。といったの禁止事項なども書かれています。
ぜひ参考にしてみてくださいね。

https://github.com/katzueno/concrete5-Coding-Guideline/tree/japanese

あと、このツイートで紹介してくれている仕様書テンプレートも参考になりましたので紹介します。

#concrete5 仕様書テンプレートhttps://t.co/lfjlYjcJxN (for 名古屋勉強会) 明日までにで詳細の説明を書いたスライドを別途上げます。
— Katz Ueno 🇯🇵 (@katzueno) February 20, 2016

concrete5_仕様書テンプレート_一般公開

https://drive.google.com/folderview?id=0BzWUde-u-vKvbDhGSUY3TDliak0&usp=drive_web#list