ノンプログラマーのためのCMSの始め方
こんにちは。 zeroichiworksの稲葉です。
今回、最近、よく利用しているa-blog cmsのアドベントカレンダーを作成するのにnoteを始めてみました。
さて、昨今、CMSといえば? と聞けば、ほとんどの方がWordPressと回答されるくらいWordPressが全盛ですね。
みなさん、WordPressについて、どんなイメージをお持ちでしょうか。
おそらく、
・無料で利用できる
・豊富なプラグインで簡単にサイトが作れる
・全世界にあるサイトの32%がWordPressで作られている
・ホワイトハウスのサイトはWordPressで作られているから安心
などなど
このように人気の高いWordPressですが、始める上で、色々とハードルがあります。ノンプログラマーでWordPressやり始めて挫折してしまった人、
結構、多いのでは?
その要因としては、ノンプログラマーが WordPressを始めるには、
最終的にプログラミング(PHP)の理解が少なからず、必要だからです。
"ノンプログラマー、CMS"とGoogleで検索すると
「ノンプログラマーのための〇〇」といようなタイトルで、プログラミングを勉強する方法や勉強するための便利なサイト情報が並びます。
CMSはじめるのに、
”やっぱりプログラミングって必要なのね”と思っている
ノンプログラマー、特にノンプログラマーのデザイナーさんで、
マークアップ(HTML,CSS)ができるという方は、ぜひ、一読ください。
今回の記事は、ノンプログラマーがCMSを始めるのに際して
・プログラミングを勉強
・理解できない魔法の呪文(サンプルコード)のコピーペー
・プラグインやアドオンを探す旅
などプログラミングが分からないことを何とかするのではなく、
プログラミング知識がなくても動的サイトが作れるa-blog cmsの始め方”
をご紹介します。
a-blog cmsって何?と、ご興味を持って頂いた方のために、a-blog cmsについて簡単に、ご説明いたします。
a-blog cmsとは
名古屋のWeb制作会社「アップルプル」が開発した純国産のCMSです。
特徴は、こちらを見てください。
https://www.a-blogcms.jp/what/features/
今回、プログラミング(PHP)をしなくても動的サイトが作れるということでa-blog cmsをご紹介させていただいております。
”PHP不要って言ってるけど、本当?”と思われた人のために、PHPが必要なWordPressと比較してみましょう。
WordPressとa-blog cmsの比較
Webサイトを作るときに、HTML・CSSができる方であれば、見た目的な部分は、対応できると思うのですが、動的でないと対応できない部分のためCMSを利用することが多いと思います。
動的な部分というのは、例えば、最新記事の表示だったり、カテゴリ検索による結果表示などですね。
この部分を実際に比較してみましょう。
WordPressのサンプルコード
「最近の投稿をタイトル順に並べる」
アルファベット順に昇順で最近の 10 件を表示するには、以下のコードで投稿日、タイトル、抜粋を表示します。
参照:https://wpdocs.osdn.jp/テンプレートタグ/get_posts
<?php
$args = array( 'posts_per_page' => 10, 'order'=> 'ASC', 'orderby' => 'title' );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
setup_postdata( $post ); ?>
<div>
<?php the_date(); ?>
<br />
<?php the_title(); ?>
<?php the_excerpt(); ?>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
このプログラムを説明すると
$args = array(... 意味:変数$argsに以下の検索条件を設定します。
'posts_per_page' => 10
意味:1ページに10件
'order'=> 'ASC', 'orderby' => 'title'
意味:タイトルを昇順
$postslist = get_posts( $args );
意味:$argsの条件で該当する最新の記事を取得します。
foreach ( $postslist as $post ) :setup_postdata( $post ); ?>
意味:$postslistに取得した記事を1件づつ$postに渡し、
以下を実行し、なくなるまで繰り返します。
<div>
<?php the_date(); ?> 意味:日付を表示
<br />
<?php the_title(); ?> 意味:タイトルを表示
<?php the_excerpt(); ?> 意味:サマリーを表示
</div>
この同じ内容でa-blog cmsを実装する場合
まずモジュールを作成します。
モジュールについての詳しい説明は、今回、割愛しますが、検索条件を設定するためのものと理解していただければ良いです。
以下の画面は、モジュールの表示設定になります。
表示順
日付(降順)
意味:最近の記事順
第2表示順
フィールド(昇順)
ソートフィールド名
title
意味:タイトルをアルファベット順で表示
表示件数
10
意味:10件表示する
トップページに表示するには、top.htmlファイルに以下を記載するだけで
設定した条件で表示できます。
<!-- BEGIN... で始まるコメントは、モジュールで設定した内容を表示するためのものです。
<!-- BEGIN_MODULE Entry_Summary id="news" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<div>
{date#Y}年{date#m}月{date#d}日
<br />
{title}
{summary}
</div>
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->
WordPressと比較すると、$args = array(... で設定するような内容は、GUI(画面)で簡単に設定できるのでプログラミングは不要ですね。
また仕様が変わった時などはモジュールを変更するだけで対応ができるのでメンテナンス性がとっても良いです。
まとめ
a-blog cmsは、モジュールの設定で様々な検索条件を設定できるので、PHPがなくても、動的な記事表示などが簡単に設定できることをご理解いただけましたでしょうか。
ノンプログラマーのみなさん、WordPressの前に、ぜひ一度、a-blog cmsを試してみてください。
最後に
この記事読んだけど、やっぱりよく分からないという方、実際にa-blog cmsの良さは、体験してみるのが早いと思います。
簡単に試すには、2つ方法があります。
①デモサイトにログインしてみる
https://demo.a-blogcms.jp/
デモサイトの上部メニューからログインをクリックすると管理者としてデモサイトに入れます。実際にデモサイト上で編集など色々とできます。
②a-blog ioを使って30日間無料で試す。
http://ablogcms.io/
こちらは、サーバーまで準備してくれるので、テンプレートファイルなどFTP経由でアクセスでき編集等ができます。
a-blog cmsを始めてみたい方は、以下の記事がとっても参考になるので読んでみてください。
https://developer.a-blogcms.jp/blog/how-to-start.html
Advent Calendarの公開の関係上、もっと色々と記載したかったのですが、時間がなくなったので、とりあえず公開します。あとで編集していきたいと思います。