この記事は「Vektor WordPress Solutions Advent Calendar 2021」12月20日の記事です。ド素人が集まってわちゃわちゃとVK Brocks Proの投稿リストについて話します。
前回12月19日、石川栄和さんの「WordPressが改竄された時の復旧方法と絶対に改竄されない対策 」もどうぞ！
はじめまして！ゲームに熱中するあまり寝食をほぼ忘れて数日ぶっ通しプレイをした結果、天井から糸状に垂れ下がるウミホタルみたいな幻覚を見て「冷蔵庫が話しかけてくる……」とうわ言を残しぶっ倒れたことがあるはしづめと申します。趣味はもちろん、ゲームです！
このアドベントカレンダーに参加していらっしゃる皆さんはVektorの中の人だったりWEB制作業の方だったり、IT関係を生業としている方が多いと思います。
が、この記事の筆者と協力者は非IT系のエンドユーザーです。事業や営利目的ではなく、完全に個人の趣味でサイトを作っています。
そんなお気楽な立場のエンドユーザーがお気楽に”推し”を語るだけのお気楽な記事なので、箸休め程度にお楽しみいただければ幸いです！
- 1. はじめに
- 1.1. 自己紹介
- 1.2. ご協力者のみなさん
- 2. ゲーマーが語る！投稿リスト推しポイント
- 2.1. 攻略サイトの一覧ページ作りに欠かせない投稿リスト
- 2.2. かゆいところに手が届かないアーカイブページ
- 2.3. 投稿リストで100分の作業時間が1分に！
- 2.4. 投稿リストブロックに追加されたら嬉しい機能は？
- 3. モデラーが語る！投稿リスト推しポイント
- 3.1. ギャラリーページも兼ねられる汎用性の高さ！
- 3.2. 並び替え「ランダム」で自前広告！
- 3.3. ステップ要素ブロックもいいぞ！！
- 4. ツイ廃が語る！投稿リストの推しポイント
- 4.1. 投稿リストでTwitter……！？
- 4.2. 投稿リストをTwitterっぽく使う手順
- 4.3. 実際の使い勝手を聞いてみた
- 5. おわりに
- 5.1. みんなちがってみんないい
- 5.2. 次回、12月21日もお楽しみください！
はじめに
自己紹介
この記事を書いているはしづめです！
小学生の頃に初めてWEBサイトを作り、中学以降学生の時はHTMLとかPHPとかJavaScriptとか頑張って使ってましたが社会人になって全部忘れました！
ゲームは主にFPSや格ゲーなどのPVPを嗜みます。協調性が欠片もないので協力プレイは苦手です。
Vektorさんを知ったのは日本製の無料テーマを探してLightningに行き着いた2016年頃。WordPressの導入も遅れに遅れての同時期でした。
今も趣味のサイトでLightningとkatawaraを使わせていただいています。
ご協力者のみなさん
ゲーマー君
某PVPゲーで対戦中散々煽り合い、DMでの場外乱闘にまで発展した挙句意気投合して今は仲良し。ゲームの攻略サイトを運営している。
モデラーさん
平和な農園系ソシャゲで知り合った平和な友人。プラモやフィギュアが好きで、レビューブログを書いているらしいが教えてくれない。
ツイ廃
どこで知り合ったか覚えてないしどんなサイトを運営しているかも一切謎。仮名はツイ廃にしてくれとご本人から要請がありました。
LightningもWordPressもまったく関係ないゲームで知り合った、ユーザーネーム以外の素性を一切知らない友人たちです！（※全員仮名、画像は私が勝手に用意したイメージです）
今はTwitterやDiscordなどのミニブログサービスやSNSが充実しているので一時ほどの需要はありませんが、ゲームをしてるとたまーーーーーに会うんですよ、「個人でサイトを作りたい」って人。
『ギルドのメンバー限定サイトを作りたい』とか、『プレイ日記を書きたいけど無料ブログサービスは広告がウザ過ぎてヤダ』とか、理由はそれぞれですが総じてWEB制作業者に依頼するほどの規模ではないので自前でやりたいって人がほとんどです。
私はそういう人に出会うたびに「WordPressを使うならテーマはLightning（最近はkatawara）がいいよ！」とおすすめしています。
今回アドベントカレンダーの記事を書くにあたりネタにしたご協力いただいたのは、私のおすすめでホイホイとLightningの無料版を導入、気付いたら課金して首までどっぷり漬かっていたというお三方です。
奇しくも3人とも（＋私もなので4人とも）口を揃えて「VK Brocks Proの投稿リストブロックが便利過ぎてもうこれなしじゃやっていけない」と言ってたので、この機会に投稿リストブロックのここが好き！というところを存分に語ってもらいました。
Zoomを使って懇談会……と言いたいところですが、ゲーマーらしく会場はゲーム中のチャットやDiscordです。ふつーにゲームしながらした雑談を、私が適当に編集しています。
基本オタク同士のおしゃべりなので、本題とまったく関係のないオタク用語が頻出します。
※記事内でいかにも実際の画面です風にスクショを使用していますが、みんな自分のサイトを知られたくないそうなので、はしづめが自前のサイトや素材を使ってそれっぽく再現しています。
ゲーマーが語る！投稿リスト推しポイント
攻略サイトの一覧ページ作りに欠かせない投稿リスト
某ゲームの攻略サイトを運営してます。最近マリワ※1のRTA※2にハマってて全然更新出来てないけど。使用テーマはLightning Proで、まだG2です。
※1 1990年11月21日発売のSFCローンチタイトル「スーパーマリオワールド」の略称だよ。
※2 リアルタイムアタック（Real Time Attack）の略で、ゲームプレイスタイルの一種だよ。
上位に人外しかいないガチ修羅の国※3じゃんマリワRTA……がんばってね。
じゃあ早速ですが「投稿リストブロック」のここが便利！とか、そういうのを教えてください。
※3 RTA記録集積サイト「SPEEDRUN.COM」では世界中のプレイヤーがよりよいタイムを目指して競い合ってるよ。マリワはどのカテゴリ（種目）も上位勢のプレイが人外じみてて見応えがあるよ！
専門用語でなんていうかわかんないけど、目次ページっていうの？サイト内の攻略記事をまとめた一覧ページを作る時にすげー便利。
投稿リストブロックがあるのとないのとじゃサイトの更新にかかる時間が全然違う。
かゆいところに手が届かないアーカイブページ
攻略内容はフツーに記事として投稿して別で固定ページ使って一覧ページを作ってる。以前はその一覧ページから各記事に1つ1つ自分でリンク設定してた。
ふつーにアーカイブページじゃダメだったのはどうして？
すげー細かくカテゴリ分けしてたっていうのと、並び順の問題が大きかったな。
扱うゲームも1本じゃないから、まずハードで分けて次にソフトで分けて、更に要素で分けて……みたいな感じでとにかく細分化してた。
細かく分けたのはまさにアーカイブページを見やすくするためだったんだけどな。
マリオの攻略を見たい人にとってドラクエの攻略は雑音にしかならんだろ？だからカテゴリ別のアーカイブページに飛べばマリオの記事だけの一覧が見られる状態にしたくてさ。実際にまあ、一応そうなってはいたんだけど……。
けど？
アーカイブページって記事新着順やん。カテゴリ「マリワ」でヨースターとう※4から順番にクッパじょう※5までの攻略記事を書いて、そんでアーカイブページを開くと一番上に出てくるの、クッパじょうになるやん。
※4 マリワにおける最初のワールド。スタート地点。
※5 マリワにおける（とりあえずの）最終コース。ラスボスがいるとこ。
なるほど、真っ先に目に入るのがよりによって最終ステージのクッパ城攻略になっちゃうんだね。並び順の問題ってこういうことか。
マリオだと深刻さが伝わりにくいけどRPGとかのストーリーもので、ラスボスは序盤から事あるごとに主人公を助けてくれたあのキャラだった！みたいなのを記事タイトルとかサムネとかで開幕ネタバレしたらキレられてもしゃーないやん。
俺は自分が好きなゲームの攻略を同じゲームを好きでプレイしてる奴に向けて書いてるから、わざわざ見に来てくれた奴の楽しみを奪うようなサイトは絶対作りたくなくて、アーカイブページの扱いにはずっと困ってたんだよな。
攻略サイトを検索する時点である程度のネタバレは覚悟してる人がほとんどだと思うけど、それはそれとしてってやつだね。
そうそう、ネタバレ気にせん奴もおるだろうけど自分のこだわりとしてはって話な。
Lightning Proならアーカイブページのカスタマイズで古い順に並べることも出来るけど、攻略サイトとして見やすい一覧ページってなると要素が入り組み過ぎてて単純なカテゴリ分けじゃどうにもならんから、結局固定ページ使って自力で目次ページ作るのが一番だってなった。これは今でも変わらんな。
絞り込み検索使うとかは？
VK Filter Search あるし。
これ俺のサイトだけなのかわからんけど、検索でうちのサイトに辿り着いてる奴がほとんどなのに、サイト内検索は驚くほど使われないんだよな。今もかなりわかりやすい場所に検索窓置いてるんだが。
あー言われてみればゲーム系のサイトでサイト内検索は使わないかも。ググって出てきたページに必要な情報がなければGoogleに戻っちゃう。
やっぱだよなー、俺もそう。だから見やすい一覧ページをわかりやすい場所に提示しておかないと、せっかく来てくれたのに無駄足踏ませて帰らせることになるんだよな。
投稿リストで100分の作業時間が1分に！
そんなわけで記事が多いソフトなんかは一覧ページを作るんだけど、これがまあぶっちゃけすげえめんどい。
記事投稿したら、そのURL持って一覧ページの編集画面に行って記事タイトル入力してリンク張って更新して……ってやるわけで。作業としては難しくもないし1分くらいで終わるけど、それを100記事分繰り返せば100分を一覧ページの編集に使ってるってことになるやろ。
それが投稿リストブロックなら一覧ページに条件指定して一度設置しておくだけで、記事投稿と同時に自動更新される一覧ページの出来上がり。
ブロック設置なんてそれこそ1分もかからんから、記事100件分につき99分の時間短縮になるわけやん。やばない？
フレーム単位でタイム短縮を意識してるRTA走者らしい発言でちょっと感動したｗｗ
RTA走者じゃなくてもゲーマーならある程度効率は意識するやんｗｗ
旧エディタ時代「本文にウィジェット使わせてくれ！」って心底思ってたからブロックエディタが出てきた時は期待したのに、当時のコアブロックしょぼくてなー……そこにVK Brocks Proの投稿リスト様がご降臨だったからマジ✨神✨だった。
今はコアブロックのウィジェットにも「最新の投稿」があるけどデザイン面でそのままだとちょっと使いにくいし、カスタム投稿タイプの記事は表示出来ないみたいだしね。
替えがきかないって意味でも一番重宝してるブロックだわ投稿リスト。
katawaraとかさ、個人的にVK Brocks Proが買い切りってだけでもあの金額は破格。
時間はいくらでも金になるけど、金で買える時間はほんと貴重だからな！
投稿リストブロックに追加されたら嬉しい機能は？
効率重視なプレイスタイルのゲーマー君にとって、効率の良いサイト運営に欠かせないのが投稿リストブロックってわけだね！
そんな投稿リストブロックに追加されたら嬉しい機能とかはある？
古い順で並び替えが出来る時点で言うことないが。……うーん、強いて言うなら表示要素の分類を細かく選べたら泣いて喜ぶかな！
ああ、すごく細かくカテゴリ分けしてるって言ってたもんね。全分類で表示すると情報量が多くなっちゃうからってこと？
そうそう。カスタムタクソノミーが5～6個あるからめっちゃうるさくなる。
確かにうるさい。
まとめて非表示に出来るおかげで助かってる。
ハードとかソフトタイトルとかは一覧ページにも書いてあるし要らんけど、「バグ技」とか「隠し要素」とか記事特有のタグなんかは表示したいことがあるな。
ただこのへんは分類自体を見直したり一覧ページの記載どうにかしたり、ユーザー側の工夫でどうとでもなる部分だから個人的には今の投稿リストブロックで十分過ぎるほど十分。
自分が好きで薦めたものだから、そう言ってくれるとなんか嬉しいね。
これはマジで良い。投稿リストブロックのおかげで縮められる編集タイム、マリワRTAでいうとSmall Only Low%カテゴリでの1秒短縮に匹敵するからな！
その例えじゃRTA民以外に凄さがまったく伝わらないと思うけどｗｗとにかく投稿リストブロックはいいぞ！！ってことだね！
投稿リストブロックはサイト更新RTAに最適！！
……というゲーマー君のお話でした！
ゲーマーは基本ゲーム以外に時間使いたくない生きものですからね！
続きましてなんのフィギュアを収集してるのか頑なに教えてくれないゆるふわ系モデラーさんにお話を伺います。
モデラーが語る！投稿リスト推しポイント
ギャラリーページも兼ねられる汎用性の高さ！
katawaraでブログを書いてます～。プラモやフィギュアのレビューと、あとたま～にガレキ※6作ったりするから製作工程をメモしたりとかかな～。
※6 ガレージキットの略だよ。Not瓦礫。
投稿リストブロックはどんなふうに使ってるの？
ギャラリーに使ってるよ～。
ちょっとだけCSSもいじってるの。こんなの！
/* 投稿リストギャラリー風 */
/* 表示タイプ：カード，表示要素：画像、抜粋，追加CSSクラス：img-gallery */
.img-gallery .vk_post_body {
padding: .5em;
margin: 0;
}
.img-gallery .vk_post_title.card-title {
display:none;
}
.img-gallery .vk_post_excerpt.card-text {
margin: 0;
text-align: center;
}
.img-gallery .main-section > .vk_post,
.img-gallery .main-section > .vk_posts > .media.vk_post-col-sm-12:first-child,
.img-gallery .vk_post.card {
border: none;
border-radius: 0;
background: rgba( 0,0,0,0.05);
}
.img-gallery .vk_post_imgOuter {
width: 100%;
border: none;
height: 200px;
}
おお……一瞬投稿リストってわかんなかった。鳥山さんの記事 でも思ったけどちょっとCSSでいじるだけでだいぶ印象変わるんだね。
わたしぜんぜんよくわかってないからヘンな書きかたいっぱいしてそうで人に見られるの超やだ笑
見た目崩れてなければ問題ないのでは？知らんけど笑
これ、投稿リストだから画像クリックすると個別の記事に飛ぶんだよね？
うん！はじめは「FooGallery」ってプラグインで1製品につき1枚、一番お気に入りの写真を並べてたの。それだと記事とは別にギャラリー作らないとだから二度手間だったけど、投稿リストは記事書けば勝手に更新してくれるから便利で、今はもうプラグイン使ってないよ。
ゲーマー君も効率化でそこ推してたなあ。
並び替え「ランダム」で自前広告！
投稿リストはランダムで並び替えが出来るのが特に気に入ってる！
ランダムは使ったことないなあ。どんな時に使うの？
CTAでさっきと同じ投稿リストブロック設置するときに敢えてカテゴリ交ぜるの。フィギュアのページに使うCTAに、フィギュアだけじゃなくて最近お気に入りのプラモタグも一緒に表示されるようにしたりとか。
ふむふむ、表示条件で制御する感じだね。
フィギュアが好きでもプラモは別に……って人も多いけど、あわよくばついでに見てって欲しいからね～。ランダムにするとさり気なく交ざってくれて良いよ～！
これアレだ、既視感あると思ったらGoogle AdSenseの関連コンテンツユニットだ。サイト内の記事一覧の中にさり気なく広告混ぜてくるやつ。
それも参考にしたし、コトブキヤとヤフオクの広告もヒントになったよ！※7これはアフィリエイトじゃないからフィギュアと間違えてクリックしてくれてもぜんぜん良いし積極的に紛らわしくしてる！
※7 スクショ載せようと思ったけどはしづめの環境ではヤフオクとコトブキヤの広告出なかったです。
投稿リストをサイト内コンテンツの広告として使ってるのかあ、面白いね。CTA、使ったことなかったけど便利そう。
CTA便利だよ～使おうよ！ランダムも面白いよ、何年もブログやってると昔書いた記事とか忘れちゃうけど、ランダムでたまに出てくると懐かしい～！！ってなるよ～。自分のブログ見るの楽しくなる！
好きでブログ書いてる人ならではの発想だね！
ネット上にコレクションボード作るつもりでブログやってるからね！あとね～、全部のブログ記事ランダムで10件表示させてどれだけ好みのサムネイルが揃うか記事10連ガチャするのも楽しいよ！
ソシャゲであんだけガチャ回しまくってるのに自分のブログでもガチャしてるの！？
金融機関には頼ってないからセーフ笑
ステップ要素ブロックもいいぞ！！
ソシャゲユーザーのガチャ事情には迂闊に触れてはいけない。ところで投稿リストブロック、もっとこうだったらな～みたいなのある？
ないよ！まんぞく！
じゃあ他に好きなブロックの話でもして笑
グリッドカラムブロックとステップブロック愛用してるよ～！プラモ製作手順の説明とかにステップブロック超便利なんだよね。最近昔の記事も全部ステップブロックで作り直したんだけど、見やすいっていっぱいコメントもらえた！がんばって良かった～！
ああ、ステップブロックいいよね。手順説明する時私もよく使うなあ。
レシピ系サイトとかにも良さそうだよね。ブロックエディタになってから知識がなくてもいろんなこと出来るから、ブログ書くの楽しくなったよ～！
ランダム機能で記事ガチャすればガチャ欲すら満たせるかも！！
……というモデラーさんのお話でした。
次は私が知る中で投稿リストを一番アクロバティックに使っているツイ廃（※本人希望の仮名であって悪口ではないです）にお話を伺いました！
ツイ廃が語る！投稿リストの推しポイント
投稿リストでTwitter……！？
リリース時からkatawara愛用のツイ廃です！！！
ツイ廃……。
ヅメちゃんがTwitterやってないのは驚きましたね。Twitterをやらずにどうやって生きているのか。
必要だと思ったことないなあ。ツイ廃ってあれだよね、めっちゃTwitterやる人のことだよね。
数えてないですが1日100ツイート以上余裕でしてるはず、全アカウント合わせれば。
複アカ持ちかあ。すごいなあ。
いやまあ、それはどうでもいいんだけど……じゃあ例の投稿リストブロックの使い方について早速どうぞ。
投稿リスト使ってTwitterみたいに自分のサイトで呟いてます！
ヅメちゃんにCSS作ってもらいましたね！
当時Twitter風にしたいとは一言も聞いてなくて、要望を一つずつ実装していったからすごいちぐはぐなCSSだけど奇跡的になんとかなっちゃったやつだね……。
ヅメちゃん足の爪もげたの？
もげたよ別に痛くはないけど。あとマックには行ってないよそれっぽいかなと思って書いただけだよ。
それはさておきアイコン画像にして投稿者名入れてよりTwitterっぽくした改変CSSを載せようと思ったけどさすがに時間なかったのでまたね。
おお！楽しみにしてます！
投稿リストをTwitterっぽく使う手順
実用性はまったくない気がしますが、一応実装手順を書いておきます。
Twitterというかちょっとしたお知らせには使える……かも……しれない？？
【推奨】専用のカスタム投稿タイプをつくる
記事がめちゃくちゃごちゃごちゃするので、専用のカスタム投稿タイプ作成を強く推奨します。
【推奨】抜粋の文字数を変更する
// 抜粋文字数変更
function tweet_excerpt_mblength($length) {
return 500; //ここの数字を好みの文字数に変更する
}
add_filter('excerpt_mblength', 'tweet_excerpt_mblength');上記PHPはプラグイン「WP Multibyte Patch」が有効化されていないと反映されないのでご注意ください。
表示したいところに投稿リストブロックを設置する
表示条件：STEP1で作った投稿タイプを選択／表示件数は最大の100
表示タイプ：カード
カラム：すべて1
表示要素：抜粋、日付
追加CSSクラス：tweet-list
CSSでそれっぽく装飾する
/* つぶやき用投稿リスト(カード) */
.tweet-list .vk_post_body.card-body {
padding: 0;
margin: 0;
}
.tweet-list .vk_post_title.card-title{
display:none;
}
.tweet-list .vk_post_excerpt.card-text{
margin: .5em 0 1.5em 0;
font-size: 1em;
}
.tweet-list .vk_post.card {
border: none;
border-bottom: 1px rgba( 0,0,0,0.1) solid;
border-radius: 0;
background: none;
position: relative;
padding: 0 0 0 5em;
min-height: 4em;
}
.tweet-list .vk_post.card::before {
position: absolute;
top: -0.2em;
left: 0.1em;
font-family: "Font Awesome 5 Free";
content: "\f598";
font-weight: 900;
font-size: 3em;
color: #482453;
}あくまでも風ですが！いつかしっかりしたやつを作りたいような、需要を考えると虚しくてやる気出ないような……。
STEP1で作った投稿タイプで適当につぶやく
改行したい場合は抜粋欄に、別に改行はどうでもいい場合は本文に書きます。STEP2で設定した文字数を超えて書くと途中で切れて表示されるので注意。
実際の使い勝手を聞いてみた
これ、投稿100件超えたらどうしてるの？
下に投稿リストブロック追加して表示条件のオフセット数を100にすれば繋がりますよ。
あっなるほど……。うーん見た目はちょっとしたお知らせにいいなとは思うんだけど、個人的にどうしても気になるところがなあ……。
管理画面がこうなるの、気にならない？
誰かに見せるわけじゃないので全然気になりませんよ！
お、大らか……！！
まあ非表示にしてるからタイトル書いてもいいわけだしね。
投稿リストはTwitter代わりにもなる（かもしれない）！！
……というツイ廃さんのお話でした！
ブロック一つとっても人それぞれいろんな使い方があって面白いですね！
おわりに
みんなちがってみんないい
普段はゲームの話しかしないので、今回改めてサイトの話をして個人的にもとても新鮮でした！
運営スタンスや見えないところでしてる苦労などなど、この記事では書きませんでしたがサイトを見ただけじゃ窺い知れないことも聞けて面白かったです！（モデラーさんとツイ廃さんはサイト自体を見たことないですけど）
一昔前は海外のネトゲなど個人サイトの横繋がりでユーザーコミュニティが形成されたり、そのユーザーコミュニティと開発の間で交流が生まれたりした時代があったそうです。
手軽なSNSもいいですが、個人の色が思いっきり出る個人サイトはまた違った魅力がありますよね！WordPressがもっともっと身近なものになって、個人でサイトやブログを書く人がまた増えたらいいのになあ～、などと思っています。
次回、12月21日もお楽しみください！
「Vektor WordPress Solutions Advent Calendar 2021」12月20日の記事でした！
12月21日は皿海佳子さんが「Lightning」を使ってLPを作った理由とその感想を書いてくださるそうです！楽しみにしています～！
わたしが書きました
ほかにも書きました
Life2022/08/29人生初！マルチに勧誘されてみたよ
Tips2021/12/20エンドユーザー3人に訊いた、VK Blocks Pro「投稿リスト」の推しポイント！
Tips2021/01/29Vitaのスティックを交換修理するよ！
Tips2021/01/16Lightningの前の記事・次の記事をとことんカスタマイズする！その1
