SlideShare a Scribd company logo
WordPressユーザー
のための
入門
自己紹介
お仕事歴 東京の制作会社に5年勤務し、
2005年に独立してフリーランスのコーダーとなる。
2013年に郷里の富山にUターンして7年目。
CMS歴 Nucleus MovableType WordPress a-blog cms
WordPress歴 10年
a-blog cms歴 1年ちょっと
連載 「WordPressユーザーのためのa-blog cms入門」
https://www.a-blogcms.jp/series/wordpress/
fb.com/kasaya.mintcode @mintcode笠谷亜貴子
今日お話しすること
WordPressと比較してのa-blog cmsのメリット
WordPressのプラグインとa-blog cms
WordPressのマルチブログとa-blog cmsの子ブログ
マルチカテゴリー vs シングルカテゴリー
WordPressのGutenbergとa-blog cmsのユニット
WordPressのウィジェットとa-blog cmsのモジュール
それぞれのカスタムフィールドの特徴
コンポーネント化/コンテンツファースト
PHPを書かなくて良い?

カスタマイズがしにくいのでは…?
プラグインがない?
機能が足りないのでは…?
せっかくのWordPressの知識が
無駄になってしまうのでは…?
カスタマイズは
自由自在で
しかも簡単
足りない機能は
ない
WordPressの
知識があると便利
勉強会に出る前に持っていた印象
WordPressと比較してのa-blog cmsのメリット
運用/更新が
簡単
メンテナンス
コストが低い
安全性が高い 構造的な設計が
しやすい
制作者にとってのメリットはクライアントにとってのメリット
運用/更新が
簡単
ユニット モジュール
管理画面の自在なカスタマイズ
制作者 クライアント
修正をいちいち依頼する
必要がない
マニュアルを
書く必要がない
細かい作り込みができる
メンテナンス
コストが低い
プラグインが不要
バージョンアップは必須ではない
制作者 クライアント
メンテナンス費用が
負担にならない
メンテナンス作業が
負担にならない
慣れたUIを使い続けられる
バージョンアップ時には
相応の見積を出しやすい
安全性が高い テンプレートはHTML
制作者 クライアント
安心PHPを書かなくて良い
構造的な設計が
しやすい
階層性のある子ブログ
シングルカテゴリー
制作者 クライアント
小さいサイトとして
スタートして
育てていける
制作時に迷わない
拡張性が高い
URLとテンプレート階層の一致
サイトの寿命が長い
私にとってのメリット
日本語
バージョン
アップが
楽しみ
気が楽
WordPressのプラグイン
開発停止の可能性
有料化
サブスクリプション化
バージョンアップ時の
不具合
セキュリティホールの
原因
最近ではACF 最近ではDuplicator
WordPressではプラグインで実装するような機能は
a-blog cmsにはもともとある
多言語機能
フォーム機能
カスタムフィールド
エントリー順の手動切替
公開日/掲載終了日
管理画面一覧での表示項目
検索機能
現在のテンプレートを表示
WPML qTranslate Polylang
MW WP FORM Contact Form 7
Advanced Custom Fields Smart Custom Fields
Posts Order Intuitive Custom Post Order
Post Expirator Post Expiration Date WP Post Expires
Admin Columns Simple Admin Columns
Search & Filter Relevanssi
Show Current Templates Current Template File
ブログ ブログ ブログ
WordPressの
マルチブログ
ブログ同士が並列に扱われて

いて階層構造はない
サーバによっては動作しない
動作しないプラグインがある
データベースが複雑になる
作成手順がやや難しい
マルチブログよりも

複数インストールや

WP REST APIが

使われることが多い
a-blog cmsの
子ブログ
管理画面から手軽に

作成できる
階層構造を持つことができ、

階層の数に制限はない
ユーザー権限等を

ブログごとに設定できる
親ブログから子ブログ、

子ブログから親ブログの

情報を取得するのも簡単
ルート
ブログ
子ブログ 子ブログ 子ブログ
孫ブログ 孫ブログ
WordPressの「投稿」の種類
投稿 固定ページ
投稿
カスタム
投稿タイプ
投稿に似ている
カスタム投稿タイプ
hierarchical => false
固定ページに似ている
カスタム投稿タイプ
hierarchical => true
階層構造の有無
アーカイブの有無
表示順
カテゴリーやタグが使用できるかどうか
WordPressの「投稿」は
あらかじめ種類に応じた性格を持っている。
必要に応じてカスタマイズして
その性格を変えることができる。
「投稿」「固定ページ」「カスタム投稿タイプ」
を後から変更するのはすこし難しい。
投稿・固定ページ・カスタム投稿タイプ
a-blog cmsの「エントリー」の種類
エントリー
どうして「エントリー」だけで良いのか?
シングルカテゴリーだから
ファイル名を空にすれば親ページ的な扱いにできるから
ファイル名が空のエントリーがなければ

インデックス(アーカイブ)ができるから
表示順、下階層のブログやカテゴリーを

含むかどうかなどの条件は

エントリー系のモジュール側で設定するから
WordPressはマルチカテゴリー
a-blog cmsはシングルカテゴリー
ブログ _top.html
index.html
_entry.html
a-blog cmsのパーマリンクはスッキリ
エントリー名はデフォルトでは entry-{ID}.html
テーマの階層とも一致している
ドメイン名/ブログコード/カテゴリーコード/エントリー名
0~n 0~n 0 or 1
テーマ内のファイルへのパスは
基本的には’/’から書けば良いだけ
WordPressのパーマリンク
更に…カスタム投稿タイプのパーマリンクは「沼」
ブロックタイプエディタ時代の到来
Gutenberg
クラシックエディタよりは運用/更新は簡単になりそう
人気プラグインとのコンフリクトもそろそろ解消される
まだ発展途上
カスタマイズするにはReactとPHPの知識が必要

(難易度が高い…)
データベース内では post_content にまとめて扱われる
ブロックタイプエディタなら!
a-blog cmsの「ユニット」
2005年から洗練され続けてきたブロックタイプエディタ
そのままでも十分使いやすい
HTMLとCSSの知識さえあればカスタマイズも自在
ダイレクト編集で表示画面から直接編集できる
特定のユニットだけを非表示にできる
表示順の変更はドラッグ&ドロップ
データベース内ではユニットが最小単位
WordPressのウィジェット
って皆さん使ってますか?
functions.phpにてregister_sidebar()で表示する

「場所」や「ID」や「表示名」を定義する
もともとはサイドバーに追加することを前提としていたので、

呼び出すfunctionはdynamic_sidebar( $number );
ウィジェット自体を作成することもできる(PHPの知識は必要)
種類は23種類
管理画面の「外観>ウィジェット」をクリックして編集画面へ
Twenty Seventeenの場合のウィジェット管理画面
a-blog cms のモジュール
はもちろんバリバリ使ってます!
テンプレートファイルにスニペットをコピペ
どこにでも気軽に使える
48種類もあってほぼなんでもできるし自作も可能
細かい設定が可能
表示画面から「モジュール」をクリックして設定画面に
「モジュールID」でテンプレートの記述と設定を結びつける
beginner2018のトップページモジュールの種類
よく使うモジュール BEST3
エントリーサマリーモジュール
バナーモジュール
ナビゲーションモジュール
1
2
3
エントリー系のモジュールで迷ったらこれ!
さまざまな条件でエントリーを出し分け、
ページャーも表示できる。
画像、URL、文字列を扱うならこれ!
公開日時も設定できる。
汎用性が高く、スライダーなどにも。
WPの「外観 > メニュー」にあたる機能はこれで作ります。
メニューアイテムに対して属性を付与するのも簡単。
もちろん、グローバルナビゲーション以外の部分にも。
WordPress のカスタムフィールド
投稿と固定ページにしか使えない
「値」はテキストエリアだけ
プルダウンメニューからフィールドを

いちいち選んで入力する必要がある
Advanced Custom Fieldsなどの

プラグインを使用することが多い
ACFを使用すれば管理画面から

気軽にカスタムフィールドを作成できる
a-blog cms のカスタムフィールド
カスタムフィールドメーカーを使ってソースを生成して、

入力用ソースをカスタムフィールド用のテンプレートファイルに

出力用ソースを出力したいテンプレートファイルにコピペ
HTMLを編集してわかりやすい管理画面を作成できる
ACFの有料版 Advanced Custom Fields Proで

できるようなことはほぼできる
エントリー、ブログ、カテゴリー、ユーザー、モジュールに

カスタムフィールドを作れる
カスタムフィールドグループはACF Proの繰り返しフィールドと似ている
そのままで検索にヒットするし、ヒットさせないのも簡単
a-blog cmsとコンポーネント化
モジュール
モジュール
モジュール
モジュール
モジュール
カスタムフィールド
カスタムフィールド
ユニット
モジュールユニット
ユニット
カスタムユニット
エントリーのメインエリア(WPでい
うところのpost_content)では「ユ
ニット」がコンポーネント
それ以外の場所では「モジュール」が
コンポーネント
「モジュールユニット」を使いこなせ
ばエントリーのメインエリア内でも「モ
ジュール」を使うことができる
「カスタムユニット」を使いこなせば
エントリーのメインエリア内でも「カ
スタムフィールド 」を使うことがで
きる
WEBサイトを独立したパーツの組み合わせとして考える
あらかじめさまざまなパーツ(コンポーネント)を作成して
おき、使い回すことで制作スピードがアップし、負担が減る
統一性、規則性をもたせやすく、ユーザーにとっても分かり
やすいサイトになる
メンテナンスが簡単になる
あらゆる場所に「パーツ」を使えるa-blog cmsはコンポー
ネント化と相性が良い
a-blog cmsとコンテンツファースト
コンテンツを投稿できるシステムを備えた
プロトタイプを最初に用意
コンテンツを入力していく
コンテンツに応じてビジュアルデザインを
考える
CMSを変えることはワークフローにも影響がある

More Related Content

PDF
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
PDF
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
PDF
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
PDF
a-sap08「a-blog cmsとMovable Type」
PDF
a-sap09「a-blog cmsとWordPress」
PDF
a-sap10「モジュールIDを理解する」
PDF
a-blog cmsのインポート機能を使いこなす
PDF
ビジュアルエディタ用CSSで 快適なブログライフを!
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
a-sap08「a-blog cmsとMovable Type」
a-sap09「a-blog cmsとWordPress」
a-sap10「モジュールIDを理解する」
a-blog cmsのインポート機能を使いこなす
ビジュアルエディタ用CSSで 快適なブログライフを!

What's hot (20)

PDF
WordPress はどこへ向かう?〜コミュニティが支える未来〜
PPTX
Azure上でec cubeを運用するポイント
PDF
今、WordPress を使う理由
PDF
WorcCamp Kansai 2015 LT大会
PDF
2014.07.09 WordBench Tokyo LT
PDF
プロ用CMSフレームワークテーマ「echo」のご紹介
PDF
a-sap 07セッション「Movable Typeとa-blog cmsの今」
PDF
どうなる?Visual Studioの クライアントサイド web開発の今後
PDF
WordPressで行う継続的インテグレーションのススメ
PDF
現代的ウェブデザイン学習
PDF
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
PDF
イマドキのCMSトレンドからWeb運用を再考する
PPTX
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
PDF
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
PDF
Ultrafast WordPress Virtual Word camp2015
PDF
AngularJSのDirectiveで俺俺タグつくっちゃお
PPTX
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
PDF
Cssアニメーションとその制御
PPTX
かけ算で使いこなす Xamarin
PDF
concrete5で実践するリードナーチャリング
WordPress はどこへ向かう?〜コミュニティが支える未来〜
Azure上でec cubeを運用するポイント
今、WordPress を使う理由
WorcCamp Kansai 2015 LT大会
2014.07.09 WordBench Tokyo LT
プロ用CMSフレームワークテーマ「echo」のご紹介
a-sap 07セッション「Movable Typeとa-blog cmsの今」
どうなる?Visual Studioの クライアントサイド web開発の今後
WordPressで行う継続的インテグレーションのススメ
現代的ウェブデザイン学習
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
イマドキのCMSトレンドからWeb運用を再考する
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Ultrafast WordPress Virtual Word camp2015
AngularJSのDirectiveで俺俺タグつくっちゃお
Xamarin で Prism を使いたい! ~「正式対応」 まで待てない人のための Prism 利用 Tips~
Cssアニメーションとその制御
かけ算で使いこなす Xamarin
concrete5で実践するリードナーチャリング
Ad

Similar to WordPress ユーザーのための a-blog cms 入門 (20)

PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PDF
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
PDF
コードをさわらずにビジネスサイトを作ろう!
KEY
WordPressってブログじゃないの?
PPT
WordCamp YOKOHAMA kai4den
PDF
2015年に向けたWordPress動向
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
PDF
ウェブ制作者のためのセルフブランディング
PDF
WordPress.comを使って個人ブログを作ってみよう!
PDF
OSC北海道 2015 ウェブサイト構築基盤、コーポレートサイトにちょうどいいCMS、baserCMSの紹介
PDF
CSS Nite in SAPPORO x a-blog cms
PDF
2014 01-11-tdc-6th-anniversary
PDF
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
PDF
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
KEY
Prejob wordpress v2_1121
KEY
Prejob wordpress v2_1121
PDF
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
PDF
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
PDF
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
PDF
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
コードをさわらずにビジネスサイトを作ろう!
WordPressってブログじゃないの?
WordCamp YOKOHAMA kai4den
2015年に向けたWordPress動向
WordPressでウェブサービスを作ろう! #wbNagoya
ウェブ制作者のためのセルフブランディング
WordPress.comを使って個人ブログを作ってみよう!
OSC北海道 2015 ウェブサイト構築基盤、コーポレートサイトにちょうどいいCMS、baserCMSの紹介
CSS Nite in SAPPORO x a-blog cms
2014 01-11-tdc-6th-anniversary
ユーザーにやさしい管理画面をつくるために。テーマ制作者ができること 初級編【WordCamp Kansai 2014】
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
Prejob wordpress v2_1121
Prejob wordpress v2_1121
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ~WordPressからはじめよう~
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
Webデザイナーが身に付けておきたい定番スキル ー WordPress 初級・導入編 ー
Ad

WordPress ユーザーのための a-blog cms 入門