WordPressテーマ : Celtis_s

Celtis_s テーマ

写真やギャラリー、スライド等をメインとしたブログにお勧めのテーマです。話題のAMPにも対応しています。

Sass

Celtis_s は、Sass ベースのレスポンシブテーマです

• Automattic の _s をベースに公式テーマ等の標準的な構成に準拠しています
• Sass を使用したテーマを新たに作成する場合のベースにもお勧めです

テーマのデザインは、CSSというスタイルシートの定義で行うのですが、このCSSを直接記述していくというのが、融通が効かないところもあり、なかなか面倒です (>_<)

そこで、より使いやすいようにCSSを拡張したCSSメタ言語がいろいろあるのですが、その中でもっとも普及していると思われるのが Sass です

Sassは、CSSと互換がありながらも構造的な記述や簡易プログラム的な変数、演算、関数等の機能がつかえるので全体の見通しがよく簡潔に記述できるようになります

スタイル

Celtis_s のスタイルの特徴について紹介します

• ホームページは、ブログカードスタイルで表示しています
  • 投稿フォーマットを活用してタイプごとにアイコンや色で区別します
  • 画像、ギャラリー、動画フォーマット時はアイキャッチを効果的に使用します
• 投稿ページ及び固定ページはAMPに対応しています
• 投稿ページ及び固定ページは、編集画面から投稿毎にサイドバー付きの２カラムとサイドバーなしの全幅ページが指定出来ます
• サイドバー付きテンプレートのコンテンツ幅は、文章、写真、動画、スライド等が見やすい６４０に、全幅テンプレートのコンテンツ幅は、９８０です
• カラーパターンセット（ライト/ダーク/カスタム）を定義することが出来、ページ毎に使用するカラーパターンを指定することが出来ます。画像がメインのページなら黒ベースにすることでひき立った画像がクールに表示できます
• 画像の添付ファイル表示は、背景画像形式で写真を大きく効果的に魅せるようにしています(画像添付ファイルのテンプレートを用意しているテーマは希少です)

※ 必須プラグイン Celtispack の FitVids, oEmbed extend 等の機能により、写真、動画、スライド（Youtube, Vimeo, Flickr、Instgram,  SlideShare, SpeakerDeck ）等を見やすくレスポンシブにすることが出来ます

文章だけではどんなスタイルか判り難いので、各デバイスでのホーム、投稿記事、添付画像のサンプル画像を見て下さい

特に写真を記事内に挿入している場合は、リンク先に添付ファイルを指定していただくと写真を大きく効果的に魅せるようにしていますし、広告の表示も可能ですのでライトボックス系のプラグインで表示させるよりもお勧めです

デスクトップ

タブレット

スマートフォン

ホームページがカード形式で表示されているのが判ると思いますが、投稿フォーマットにより表示形式が変わります

• アイキャッチがない場合は、コンテンツの抜粋を表示
• 画像、ギャラリー、動画フォーマットは抜粋なしの 640サイズサムネイル
• その他の投稿フォーマットは抜粋と中サイズのサムネイル
• オプション指定により全て640のラージサイズのサムネイル画像にすることも可能です

※モバイルはシュミレータでの確認で、実機ではありません
※Ver1.5.7 からスマートフォンのみヘッダーエリアの高さを120pxから60pxに、サイトのキャッチフレーズを非表示に変更したので上記サンプル画像とは少し異なります

表示サンプルページ

下記リンクページからサンプル表示が確認出来ます

• テーマ表示サンプル：HTML タグや画像配置
• Celtis_s テーマのギャラリーデモ

スピード対策

Celtis_s は他の高速なテーマに劣らずにかなり高速なテーマです　(^^)

ただ、サイトを高速化するにはテーマだけでは実際のところ無理ですので、多くの場合ページキャッシュプラグインを利用して対策を行います

私の作成した YASAKANI Cache が手軽で簡単に使えますのでまだキャッシュプラグインをお使いになっていない場合は試してみて下さい

WordPress Plugin : YASAKANI Cache

WordPress が超高速になるシンプルで使いやすいページキャッシュプラグインです。簡易的なアクセスログ、統計情報、セキュリティ機能もありとっても便利です (^^)

セルティスラボ

また、Plugin load filter プラグインや Celtispackプラグインの Unveil lazy load 機能 を使うことで高速化対策を簡単に行うことが出来ます

WordPress Plugin : Plugin Load Filter

WordPress で沢山のプラグインを使用している場合に Plagin Load Filter プラグインを使うと、ページタイプや投稿フォーマット、カスタムポストタイプ毎に有効化するプラグインを動的に選択することが出来ます。　プラグインの読み込みを減らし、ページ表示のレスポンスを高速化する効果があります (^^)

セルティスラボ

テーマやプラグインを使わない高速化対策として .htaccess を適切に設定する方法もあります

mod_deflate, mod_expires を使用してHTTP通信データ量を削減

機能

Celtis_s テーマは、必要最低限の機能は抑えつつ、出来るだけシンプルにしています

別途このテーマに最適化された Celtispack プラグインを導入することで、様々な便利機能が使用できるようになります

合わせてお使いいただくとシンプルなのに多機能というベストバランスな組み合わせとなります

テーマでサポートしている機能

• AMP (AMPページへのリンクも自動的に表示してAMPを積極的に活用)
• bbPress（フォーラムプラグイン）用のスタイル定義
• 投稿ページ及び固定ページのサイドバー有無（１カラムのページ作成対応）
• 投稿ページ及び固定ページ毎のカラーパレット設定
• カスタマイズ画面からカラーパレット毎の色を簡単に設定
• 投稿フォーマットサポート（タイプ別アイコン表示）
• Googleカスタム検索サポート
• Google WebMaster tool の構造化データエラー対策（microformats hentry）
• パンくずリスト（JSON-LD対応）
• ページナビゲーション
• 背景画像サポート
• ヘッダー画像サポート
• サイトロゴサポート
• メインメニュー、フッターメニューサポート
• サイトマップ
• 追尾型のサイドバーエリア
• Twitter,Instgram,Facebook,Google+,RSS フォローアイコン表示機能
• 著作者／著者アーカイブセキュリティ対策
• クリックジャッキング対策として header に X-Frame-Options 設定

Celtispack プラグインでサポートしている機能

• OGP、SNS共有ボタン（AMP対応）
• Google アドセンス(AMP対応)
• Googleアナリティクストラッキングコード設置（AMP対応）
• サムネイルの再作成機能(Regenerate Thumbnails は不要)
• アイキャッチ未設定時の代替サムネイル機能
• jpeg 画像の画質指定
• png画像のサムネイルを jpg形式へ変換する機能
• ブログカード機能（AMP対応ページならAMPへのリンクも表示）
• ギャラリーのスライダー表示機能（AMP対応）
• 画像、埋め込みコンテンツの遅延ロード (Unveil.js) 機能
• youtube 等の動画のレスポンシブ対応機能（FitVids）
• 記事タイトル後、h2/h3/モアタグ後、コンテンツ後にウィジェットエリア設置
• 関連記事ウィジェット（AMP対応）
• 新着/更新記事ウィジェット（投稿フォーマット、カテゴリー指定対応 AMP対応）
• oEmbed 埋め込み用ウィジェット
• 人気記事ウィジェット（YASAKANI cache プラグインの統計データ使用）
• 関連記事対象としたダイナミックタグクラウド
• 記事の複製や予約更新機能
• シンタックスハイライト google-code-prettify サポート
• トップへ戻る及びスクロールアップ、ダウン
• jQuery1.2 / jQuery3.3 / jQuery3.3 Slim を Microsoft Ajax CDN からロード
• description meta タグの出力（SEO)
• スクリプトとスタイルシートの ?Ver 情報を取り除く
• テキストウィジェットでショートコードの使用許可
• セルフピンバックの禁止
• 期限切れの Transient キャッシュをクリア機能

どの機能も一回使ってみれば、なくてはならないちょっと便利なものばかりです　(^^)

まだ、足りない機能もあるとは思いますので、お気に入りのプラグイン等と組み合わせて使用して頂ければと思います

ダウンロード

モバイル環境の確認はシュミレータのみで実機では行っていません。実機で動作させた場合にいろいろ不具合があるかも知れませんが、使用感等を送っていただけると嬉しいです (^^)

インストール

WordPress バージョン4.5以下の場合は、先に WordPress のバージョンを上げてからインストールして下さい（WordPress 最新版推奨）

下記手順でテーマをインストール出来ます

1. WordPress 管理画面を表示します
2. 左側のメニューから外観のテーマを選択します
3. 表示された画面の上部の 新規追加 をクリックします
4. 表示された画面の上部の  テーマのアップロード をクリックします
5. ファイルを選択 ボタンをクリックして、ダウンロードしてある Celtis_s_v1.x.x.zip ファイルを選択します
6. 今すぐインストール ボタンをクリックするとインストールが行われます
7. 有効化すれば、このテーマが使用できるようになります

また、既にインストール済みの Celtis_s テーマをバージョンアップする場合は、通常は一度違うテーマに切り替えて古いバージョンの Celtis_s を削除してからインストールを行う必要がありますが、 Easy Theme and Plugin Upgrades プラグインを使えば更新作業が簡単になります

Easy Theme and Plugin Upgrades – WordPress テーマやプラグインを Zip ファイルから更新

WordPress テーマやプラグインを Zip ファイルから更新する為のユーティリティプラグインを紹介します。Celtis製テーマや Celtispack プラグインの更新作業が簡単になります (^^)

セルティスラボ

テーマを有効化すると Celtispack プラグインがインストールされていない場合は案内メッセージが表示されますので、続けて Celtispack プラグインをインストールして下さい

初期設定

WordPress 管理画面を開いて、左側のメニューから外観のカスタマイズを選択します

ここからテーマのカスタマイズを行うことが出来ます

• サイト基本情報
• オプション設定
• 色
• SNSアイコン表示
• ヘッダー画像
• 背景画像
• メニュー
• ウィジェット

詳細は下記を参照してください

Celtis_s テーマのカスタマイズ（初期設定）

WordPress の Celtis_s テーマのカスタムヘッダー、メニュー、背景の設定等についての紹介です

セルティスラボ

各機能の設定方法

Celtis_s テーマにWordPress4.5でサポートされたサイトのロゴを設置する

Celtis_s テーマに WordPress4.5 でサポートされたサイトにロゴを設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください

セルティスラボ

Celtis_s テーマにGoogleカスタム検索を設置する

Celtis_s テーマに Google カスタム検索を設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください

セルティスラボ

Celtis_s テーマにサイトマップを設置する

Celtis_s テーマに サイトマップを設置する為の手順を紹介します
簡単に出来ますので、ぜひチャレンジしてみてください

セルティスラボ

Celtis_s テーマの動画等レスポンシブ対応について

Celtis_s テーマで動画やスライドを埋め込んだ時の設定について紹介しています
ブラウザのサイズをいろいろ変えてみると動画やスライドがいい感じで拡大縮小してくれるのが確認出来ます　(^^)

セルティスラボ

Sass(scss) から css ファイルへの変換方法

Sass(sccs) のコンパイルは node-sass がRuby不要でシンプルかつ高速！

Node.js の node-sass モジュールを使って Sass(scss)スタイルシートをコンパイルして css に変換する方法を紹介します。Rubyも不要だし、とても高速なのでお勧めです　(^^)

セルティスラボ

Visual Studio Code で Sass(scss)コンパイルを行うシンプルな方法

Visual Studio Code で node-sass を使い Sass(scss) コンパイルを簡単に行うことが出来るので設定方法と使い方を紹介いたします　(^^)

セルティスラボ

AMP対応について

WordPress Celtis_s テーマの一歩進んだAMP対応と使い方

WordPress　AMPプラグインよりも一歩進んだAMP対応の Celtis_s テーマ v1.5 を公開しました。Celtispack プラグインと合わせてお使いください (^^)

セルティスラボ

子テーマについて

Celtis_s テーマは、SASS（SCSS）でスタイルを定義しているので、これをベースに直接カスタマイズしていただいたほうが良いと思い子テーマを配布していません

ただ、子テーマを使って運用できないというわけではありませんので、function.phpとstyle.css を使い子テーマでカスタマイズすることは出来ます

但し、Celtis_s テーマはAMPにも対応していますので、AMP用に一工夫必要です

子テーマの functions.php は下記のような内容がベースになります

<?php
//カスタムスタイル定義は子テーマの style.css ファイル内で指定する
add_action( "wp_enqueue_scripts", "theme_enqueue_styles" );
function theme_enqueue_styles() {
    wp_enqueue_style( "parent-style", get_template_directory_uri() . "/style.css" );
    wp_enqueue_style( "child-style",  get_stylesheet_directory_uri() . "/style.css", array("parent-style") );
}

//AMPページ用のカスタムスタイル定義は直接この関数内で指定する
add_action( "amp_post_template_css", "childtheme_custom_amp_style" );
function childtheme_custom_amp_style($amp_class){
?>
body {
    background-color: ivory;
}
<?php      
}

子テーマの style.css は下記のような内容となります

/*!
Theme Name: Celtis_s Child Theme
Theme URI: https://celtislab.net
Description: 日本語版の見やすくてシンプルなレスポンシブテーマです。
動作には WordPress 4.5 以上のバージョン、親テーマ Celtis_s が必要です

Template: celtis_s
Version: 1.0.0
Author:
Author URI:
Tags:

License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ここからCSSを記述します */
body {
background-color: ivory;
}

上記内容で背景がアイボリーになったのは確認したので、こんな感じで行けると思います (^^♪

まだ設定や使い方の情報が足りないかも知れませんが、不定期に追加していく予定ですので、たまにこのページを参照して更新されていないか確認してみてください　(^^)

テーマ開発の励みにもなるので、クールなサイトが出来たら教えて下さい　(^^)

Have a good fun！　 ヽ(^o^)丿

履歴

2018/6/5 Version 3.0.0

• 游ゴシック(Yu Gothic)フォントへ変更して CSS全体を調整
• AMP対応に固定ページ追加
• jQuery3.3 対応
• サイトの言語を英語にした時に抜粋の長さが違っていた等のいくつかの修正
• 推奨プラグイン Celtispack の案内を 3.5 以上に変更

2018/3/2 Version 2.3.0

• home ページの記事一覧画像のラージサイズモード追加
• amp-img 変換時の正規表現を修正
• CSS 調整 : AdSense 自動広告挿入時の余白を確保する為 p タグ等のマージンを調整
• 推奨プラグイン Celtispack の案内を 3.3 以上に変更

2017/12/19 Version 2.2.1

• WP4.9 gallery widget, text widget のギャラリー出力に添付ページ用のイメージサムネイルカスタマイズ用データ追加
• h1-h6 と bbpress 周りの CSS調整
• The tag ‘amp-img’ contains the attribute ‘sizes’ repeated multiple times. AMPエラー修正
• 著者アーカイブ表示の 404 リダイレクト処理修正
• 推奨プラグイン Celtispack の案内を 3.2 以上に変更

2017/10/27 Version 2.1.1

• home にアドセンスインフィード広告用のアクションフック設置
• home, archive の一覧リストに Google AMP Cache のリンクも表示
• AMPページで自サイトの投稿ページへのAMPリンク置き換え（ナビ関連）を常時有効化
• gallery の添付ページ表示のサムネイルナビリンク設定時の正規表現修正 (WP4.7以上)
• 推奨プラグイン Celtispack の案内を 3.1 以上に変更

2017/10/12 Version 2.0.0

重要!! バージョン 1.5 から多くの変更や廃止した機能もあるのでテスト環境でよく確認してから更新してください

• テーマの色設定を ライト/ダーク/カスタム のカラーパターンから選択する方式へ変更して全体的にCSSを再調整
• カラーパターンは投稿/固定ページ毎に選択可能
• gallery の添付ページ表示テンプレートにサムネイルのナビリンク追加 (WP4.7以上)
• 70 x 70 small サイズのサムネイル生成機能を廃止
• AMP での通常ページへの案内表示を記事上部へ表示できるよう変更
• AMP amp-utils 更新
• Google カスタム検索の埋め込みスクリプトの変更で機能しなくなっていたのを修正
• Breadcrumb パンくずの URL バグの修正
• 推奨プラグイン Celtispack の案内を 3.0 以上に変更

2017/8/22 Version 1.5.7

• クリックジャッキング対策として header に X-Frame-Options 設定
• AMP 共有ボタン機能を Celtispack ogp-sns 機能へ統合してテーマから削除
• モバイル用に幅600px以下のヘッダーエリアの高さを 60px に変更してCSS調整
• SVGアイコン更新
• 動作条件を WP4.5 以上に、推奨プラグイン Celtispack を 2.5 以上に変更

2017/5/9 Version 1.5.6

• 検索やアーカイブページ（カテゴリー、タグは除く）に noindex メタデータを出力
• TinyMCE のクイック入力スタイルにマーカー、ボックス表示（Information/Notice/Alert/Success/Address）定義追加

2017/4/17 Version 1.5.5

• AMP 時にカスタマイザーの追加CSSが設定してあるとエラーになるので読み込まないように対策
• アイキャッチ未設定投稿で AMPリッチスニペットのイメージデータがないエラー用にサイトアイコン画像データを代替設定

2017/4/13 Version 1.5.4

• AMP はデフェクトスタンダードの Automattic AMP プラグインに準じたURL構成やアクションフックを実装したテーマによる対応（AMPプラグイン不要）
• AMP 用の amp-utils.php 等多数のサポート処理追加
• AMP スタイル用 style-amp.scss を追加して既存のスタイルとのモジュール共通化に対応
• AMP 投稿ページ用の single-amp.php 等テンプレート関連の追加
• 動作条件を WP4.4 以上に、推奨プラグイン Celtispack を 2.4 以上に変更

2017/1/11 Version 1.4.1

• カスタマイザーの編集ショートカット対応（WP4.7）
• Template Post Type による投稿の全幅テンプレート選択対応（WP4.7）
• SVGアイコンへ置き換え(※1)
• フッターのSNSリンクへ Instgram 追加
• その他、画像カードやタイトル背景、フッター等のCSS修正変更等

※1. SVGアイコンはとりあえずSNSと一部アイコンのみ対応しています。今後それ以外で使用している Dashicons 等のアイコンも順次SVGへ置き換えていく予定です

2016/10/21 Version 1.3.0

• bbPress （フォーラムプラグイン）用のスタイル定義追加
• bbPress カスタムポストタイプ forum, topic, reply 時はテーマのパンくず表示を停止
• Home, Sitemap 簡易キャッシュをデフォルト無効にする（YASAKANI Cache プラグインの使用を推奨）
• 付属している JS ファイルのミニファイ化
• 推奨プラグイン Celtispack の案内を 2.2 以上に変更
• CSS調整
• PHP　Notice エラーの修正

2016/6/6 Version 1.2.0

• Custom Logo サポート (WP4.5)
• ページ分けしている場合のページネーションリンク表示位置をカテゴリー、タグ表示前に変更
• 推奨プラグイン Celtispack の案内を 2.0 以上に変更
• CSS調整

2016/3/24 Version 1.1.0

• 投稿タイトル部への背景画像表示を追加
• レスポンシブイメージ srcset のテーマ対応
• 全体的なデザインの微調整

2016/3/2 Version 1.0.2

• header <link rel=”profile” href=”http://gmpg.org/xfn/11″> を削除
• 推奨プラグイン Celtispack の案内を 1.8 以上に変更
• 開発環境の Sass(ruby) を node-sass(node.js) に変更したことに伴う修正
• VSCode で scssファイルのカスタマイズが出来るよう tasks.json, package.json を同包

2015/11/24 Version 1.0.1
CSS調整と Celtispack プラグイン Ver1.70 対応

2015/10/23 Version 1.0.0
公開