QuickCMS講座:テンプレートを編集しよう2️⃣

Print

QuickCMS講座:テンプレートを編集しよう1️⃣から

QuickCMSツイッターカード

Twitterカードを作ろう

もう以前見たことですが、オープンソリューションのサイトURLを貼っつけても、なんとTwitterカードが出てきません。
って言うことは当然、私達がQuickCMSでサイトを作っても、Twitterカードは出てこないんですね。そのままでは。

センチュリー・大橋

若葉 翠

OGPプラグインもない、当然、Google検索してもそんな情報は出てこないんですよねぇ。
公式がTwitterカード使ってないんだから、そもそもOGPを使う想定が無いって言うことなんですよね。
残念ながらそうなっちゃいますね・・・。
ではOGPを導入するために、ちょっとOGPのコードについて確認しましょう。
<meta name="description" content="普通のディスクリプション">
<meta property="og:title"       content="">
<meta property="og:description" content="">
<meta property="og:url"         content="">
<meta name="twitter:card"       content="">
<meta property="og:image"       content="https://century-ohashi.pl/century.jpeg">
まずTwitterカードを作るためには、上のコードをメタタグの中に埋め込まなければいけませんね。
そして、content=""のダブルコーテーションで挟まれた中身がTwitterカードに表示される内容になります。
これは動的HTMLのCMSによくありがちなパターンですが、基本的にはheader.phpの中にメタタグを編集する項目があるわけです。

って言うことはそのcontent=""の中身はPHPを書いて動的に取得しないといけないわけですね・・・。
そうです。
Twitterカードが無い状態のQuickCMSは、header.phpのメタタグはこのようになっています。
<head>
<title><?php echo $config['title']; ?></title>
  <meta name="description" content="<?php echo $config['description']; ?>" />
  <meta name="generator" content="Quick.Cms v<?php echo $config['version']; ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/templates/<?php echo $config['skin']; ?>/style.css" />
  <script src="/plugins/jquery.min.js"></script>
  <script src="/core/common.js"></script>
  <?php if( isset( $config['enabled_sliders'] ) ){ ?><script src="/core/libraries/quick.slider.min.js"></script><?php } ?>
</head>

 

どうです?
これじゃTwitterカードが出ないですよね。

出ないですねぇ・・・。
って言うかsimple & easyならプラグインでやってくれれば良いのに・・・。
いやぁ、そのおかげで業者がご飯にありつけるんじゃないですか?
で、meta nameのdescriptionを見てください。「$config['description']」の記載があるでしょう?
つまりこれ、色んな情報はconfig.phpから動的に拾っているって言うのが、なんとなくわかりました。
<head>
  <title><?php echo $config['title']; ?></title>
  <meta name="description" content="<?php echo $config['description']; ?>" />
  <meta name="generator" content="Quick.Cms v<?php echo $config['version']; ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/templates/<?php echo $config['skin']; ?>/style.css" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@CenturyOhashi" />
<meta name="twitter:creator" content="@CenturyOhashi" />
<meta property="og:url" content="" />
<meta property="og:title" content="<?php echo $config['title']; ?>" />
<meta property="og:description" content="<?php echo $config['description']; ?>" />
<meta property="og:image" content="/images/large.jpeg" />
  <script src="/plugins/jquery.min.js"></script>
  <script src="/core/common.js"></script>
  <?php if( isset( $config['enabled_sliders'] ) ){ ?><script src="/core/libraries/quick.slider.min.js"></script><?php } ?>
</head>
headタグ無いのOGPタグをこう記述することで、各ページのタイトルや概要を動的に取得し、Twitterカードへ表示させることが出来ます。
実は私って今までbaserCMSで定義されたcakePHP風の構文しか書いたことないんですよねぇ。
素PHPとかすっごい久しぶりに書きました(苦笑)。

アプリ開発とか直接やらないと、構文あんま書かなくてもなんとかなっちゃうこと多いですからねぇ・・・。
プログラム書ける人ですら、良いCMSが有れば、0ベースで開発しなくても良いわけですし・・・。
余談ですが、QuickCMSのWYSIWYGエディターはJavaScript封じをやってきます。
PHPもダメです・・・。
なので、JavaScriptやPHP、span要素を使った機能はheader.php、footer.php、page.phpと言ったファイルの中で編集する必要があり、それが全ページに反映されます。

 


個人的な悩みごと

ちなみにQuickCMSのversion6系統は、見ての通り1カラムで使うことをベースに組まれています。
5系は2カラムだったんですが、5系と同じように使える機能はQuickCartにのみ残りました。
そこで無理矢理2カラムにする方法をやったことがあるんです。HTMLだけで。

は?
HTMLだけでやったんですか?
はい。
サイトでソースを一度見ると、ulのクラスとしてimage-2なんていうのが定義されてるんですよね。
そのクラスを悪用すると、なんと無理矢理2カラム風のWEBページを作ってしまうことが出来ます。PC版では。

スマホ版では?
こうなるみたいです。
QuickCMSスマホで見た版
ツイートボタンが<ul class="image-2">の中に入っているんですが、デスクトップ版だと右橋にツイートボタンが来るのに対し、スマホ版だと真ん中の上部に来るようなんですね。
じゃあ各コンテンツへの図書館的なページを作ろうにも、CSSでのボタン作成が上手くいかないんです・・・。

いっそJoomla!サイトの中でライブラリ作って誘導リンク貼っていくのはどうですか・・・?
そうですね。
とは言え、Joomla!サイトの政治談義は極力緩いレベルでやりたくて、あんまりガチな政治話へのリンクは起きたくないですけどね・・・(苦笑)
Tags: