Pulse CMS でブログを書こう!プラグイン紹介もあるよ

2016/10/21

こんにちは!@rie05です。

今回は、Pulse CMSでブログを書いて公開する手順を解説します。

ブログ周りの便利なプラグインも一緒に紹介します!


Pulseのブログ機能は超シンプル

早速なにか記事を書いて投稿してみましょう。

管理画面トップから、ブログをクリック。

基本的に1つのPulseに1つのブログ。カスタム投稿的なものはありません。


デフォルト状態だとこんな感じで3記事、ダミー記事が入ってます。必要ないかと思うので全て削除してOKです。

それから、ブロックの話のときにも出てきた「Embed Tag」がまた出てきましたね。


これはブログ記事を出力するタグになります。

ページでも、ブロックでも、このコードを書くとブログ記事が出力されます。

ただこのタグを書くと、記事一覧&ブログ記事そのものが全て出力されることになるので注意。


新規記事を追加するので、新規ボタンを押して次へ進みます。

するとファイル名を入力する画面になりますので、適当な数字.txtで新規作成ボタンを。

Pulseではブログ記事ひとつひとつもテキストファイルになっていて、

数字の大きいものが上にくるようになっています。

順番は0,1,2…のように正しくナンバリングする必要はなく、例えばここで10.txtとしても

数字が1番大きいので1番上にきます。


新規作成すると、ブロックの時に見たようなWYSIWYG画面が登場し、ブログ執筆できるような画面が開きます。

気づきにくいのですが、タイトル情報と日付はMETAボタンの中に隠れています。

METAボタンを押すとブログタイトル入力欄、日付欄(初期は作成した日付)があります。

タイトルにはもちろん日本語OKです。


編集が完了したら、ページ下の保存ボタンで即公開されます。


追記:「もっと読む」リンクをつける

##more##

※#は半角の#に変えてください

このコードをもっと読むリンクをつけたい場所に書くことで、moreタグとなります。

長文の記事になる場合はつけておいたほうが親切ですね。

(このブログでも毎回moreタグつけています。)


以上が簡単なブログ執筆の方法です。


config.phpも見直しておこう

インストール編では必要最低限のところしか編集しなかったconfig.phpですが、

ブログにまつわる設定もあるのでここで見ておきましょう。

下の方の、// BLOGから始まっているところです。

// BLOG
$result_per_page  = 5; // 1ページに何件表示するか。例だと5件表示になってます。
$disqus_comments  = true; // Disqusのコメントを使う場合はtrueに。使わない場合はfaluseに。
$disqus_shortname = "pulsecms-fun"; // Disqusを使うなら、Disqusアカウント名を記入。
$date_format      = "Y/m/d"; // ブログの日付形式。左の指定なら年/月/日となります。

コメントアウトされているところを日本語訳+解説いれました。

Disqusというのは、日本の他ブログでもちょこちょこと目にしますが、海外製のコメント機能サービスです。

このブログでも導入しています。(1番下に出てるはず!)

導入方法は簡単で、Disqus公式サイトよりアカウント登録し、コメント機能をつけたいサイトの設定をすれば完了です。


今後のPulseブログ機能に望むこと

ここまで読んで、簡単・シンプルなことは分かって頂けたかと思うのですが、

サイト制作者やブロガーの方は、「カテゴリはないの?」「予約投稿したいときは?」などなど

物足りない部分がたくさん出てきてるのではないかと思います。私もそうです笑


Pulse CMSは非常にシンプル軽快なCMSですが、このブログ機能に関しては色々な声があがってます。


カテゴリ機能/タグ機能

これはやっぱり欲しいです。特定カテゴリのみの記事出力などもできれば良いですね。


URLカスタム設定

自分で決めたURLで公開したいことも多いと思うので執筆画面から変更できるようになればいいなあ。


下書き機能/予約投稿機能

下書き(ドラフト)がないのって結構不便かもしれないなとこのブログを書いていて思います。

今は保存=公開なので、保存時に公開する日付時間を設定できるようになればいいですね。


アイキャッチ機能

ブログ一覧で「画像+タイトル+抜粋文字」の形式を1ブロックにして並べるって多いと思うのです。

現状だと記事に対する画像を設定する機能がないので、

記事1番上に画像を置いてそのあとmoreタグ、という方法でしか実現できません。

(このブログもそのやり方です)


blog.phpに全てが書かれている

例えばWPでいうところのsingle.phpはなく、全てはinc/tags/blog.phpに書かれています。

「記事詳細画面のみでやりたいこと」って結構あって、一覧と詳細が1枚のphpファイルにあるのはちょっと分かりにくいかなと思いました。

他CMSならササっとできるのにーってところが、逆にblog.phpの中のソースコードを探して・・・と

煩雑になっちゃうのがちょっともどかしい感じです。(比べるのもアレなんですが)

ただここは、やりすぎるともっさり機能が標準搭載になってシンプルさを損なうので難しい・・・。

blog.phpのカスタム話はまた別記事ででも。


ブログ機能周りのオススメプラグイン紹介

Pulseにもプラグイン(機能拡張)という概念があり、下記URLにて公開されています。

Pulse Addons Plugin

このブログでも少しずつ紹介したいと思います!今回はブログ機能周りのものを。


Social Links By Tim Plumb

ブログにSNSボタンを簡単に追加できるプラグインです。

初期設定では、メール/Facebook/Twitter/Linkedin/Google+の4つが設定されています。


導入方法

1.上記リンクのDownloadボタンから本体ファイルをダウンロード

2.sociallinks.phpファイルを、Pulseをインストールした先のinc/tagsフォルダの中にアップロード

3.管理画面→ページの中にblog.txtの1番下に下記ショートコードを記述

{{sociallinks}}

※{}は半角の{}に変えてください

このブログでも導入済みですが、ちょっとカスタムしています。


要らないボタンを削ってデザインを調整する

このブログの場合、メールとLinkedinは要らないかなーと思ったので削ることにしました。

sociallinks.phpファイルをエディタで開き、編集します。

下の方に、//add the buttonsとコメントされている下、

それぞれコメントアウトで//twitter や //facebook といった記述があるので、

必要ない部分の固まりを削除するかコメントアウトしてしまいましょう。

お好みのSNSのみ出力されるようになれば成功ですが、デフォルトデザインのままだと

5個が横並びになっているので、減らした分デザインが横に寄ってしまいます。

本文に対して左に詰まってしまった例。あんまりイケてないですね。

ここはCSSの調整のみで変更できるので、3つで100%になるようにCSS修正します。


同じsociallinks.phpファイルの中にCSS指定されているので、100行目あたりの

.social-links-wrapper a { 
width:19.6%;float:left;background-color:#ccc;color:#fff;margin-right:0.5%;font-size:{$fontsize};
box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.15);text-decoration:none;padding-bottom:0.1em;border-radius:2px; }


social-links-wrapperクラスのaの指定を探しましょう。

width指定19.6%が怪しいですね。ここを3つ並びの場合33%とかに変えてあげると、ちゃんと横幅が変更されます。

これはPulseじゃなくてCSSの話ですが、カスタマイズする時にどこに指定があるのか少し探したので備忘録として。



Open Graph Protocol  by Hissy

日本人のヒッシーさんが開発してくれた、OGPプラグインです。執筆時点で、リリースほやほやです!

このプラグインは、記事ごとに適したOGPを出力してくれる、イメージ画像も指定できるものです。

デフォルトのPulseではどの記事も全てlayout.phpなどの<head>の中に手製で書いたOGPしか出力できなかったので、

Pulseでブログを書くなら必須で入れるべきかなと思います。

このブログをFacebookでシェアしてたら毎回OGP画像が同じで、それを見たヒッシーが作ってくれました(感動!)



導入方法

1.上記リンクのDownload Nowボタンから本体ファイルをダウンロード

2.ogp.phpファイルを、Pulseをインストールした先のinc/tagsフォルダの中と、inc/pluginsフォルダにアップロード

3.layout.phpの<head>と</head>の間に、下記コードを記述

<?php include_once('inc/plugins/ogp.php'); ogp_render(); ?>


4.config.phpに下記コードを記述デフォルトURLとデフォルト画像を指定

$ogp_base_url = 'http://www.example.com/'; // デフォルトURLを指定
$ogp_default_image = 'template/img/logo.png'; // デフォルトOGP画像がある場所を指定


5.これで準備は完了です。ブログ記事を書くと自動でタイトルなどは入りますが、画像は、ブログ記事執筆画面1番上に

{{ogp:image:content/media/example.jpg}}

※{}は半角の{}に変えてください

このショートコードをいれて上げると記事ごとに任意の画像を指定できます。

追記:画面1番上でなくても、編集画面内どこに書いても適用されるとのことです。

※画像は管理画面の「メディア」からアップロードしておいて、それを指定しましょう!


Pulse CMSのプラグインはまだ数は多くないですが、これからどんどん増えるのではないかなと思ってますし、

今回のヒッシーみたいに日本人開発者もたくさん参入してもらえるとすごく嬉しいです!

私はプログラムは苦手なので、公式テンプレートをリリースしようかなと考え中です。

デフォルトのブログ機能も時期Pulse CMSバージョン5では色々と拡張予定なのでお楽しみに!

comments powered by Disqus

Writer : Rie Seguchi
Pulse CMS エバンジェリスト 兼 コミュニティマネージャー
Five Dimension Graphics(5DG)という屋号でフリーランスデザイナーとして活動中。