MODX Evolution サブメニューが出力されない

最新版 MODX Evolution は 1.0.17J だ。（2016年10月18日現在）

1.0.16jから最新版へアップデートしたところ、サブメニューが出力されなくなった。

原因は不明なため、前バージョンに戻した。

事前にファイルのみのバックアップ（圧縮ファイル）をとってから、アップデートを行い、元に戻した。（解凍）

追加）　2016.11.6
Evolution 1.0.17J から 1.0.18J ベータ8へアップデートしたところ、「サブメニューが出力されない」問題が、ある程度解決した。 （詳細は未検証）

Modx Evolution 「リソースを投稿」でエラー

《 トラブル内容 》
Modx Evolution で「リソースを投稿（新しいページ）」ができない。

以下のような MODX Parse Error が出力される。

《 解決方法 》
「グローバル設定」の一部を変更する。
グローバル設定　＝＞　フレンドリーURL タブ　＝＞　エイリアス自動生成　の設定を変更する。

設定内容は以下の通り。

numbering in each folder　＝＞　pagetitle　または　無効　に設定

《 エラー内容 テキスト 》

« MODX Parse Error »

MODX encountered the following error while attempting to parse the requested resource:
« Execution of a query to the database failed - Got error 'this version of PCRE is compiled without UTF support at offset 0' from regexp »

SELECT MAX(cast(alias as SIGNED)) FROM `hogehoge.jp`.`modx_site_content` WHERE id<>'0' AND parent='0' AND alias REGEXP '^[0-9]+$'

最小限のCSSコードでプルダウンメニューをつくる

html ファイルと CSS ファイルで、最も少ないコードでプルダウンメニューを作成する。

▶ index.html

  <div id="menu" >
  <ul >
      <li > <a href="#" >Home </a > </li >
     
       <li class="dropdown" > <a href="#" >登山 </a >
           <ul >
                <li > <a href="#" >高尾山 </a > </li >
                <li > <a href="#" >栗駒岳 </a > </li >
                 <li > <a href="#" >富士山 </a > </li >
                 <li > <a href="#" >鳥海山 </a > </li >
            </ul >
       </li >
     
       <li class="dropdown" > <a href="#" >キャンプ </a >
            <ul >
                 <li > <a href="#" >霧ヶ峰高原 </a > </li >
                 <li > <a href="#" >車山高原 </a > </li >
            </ul >
       </li >
     
       <li class="active" > <a href="#" >海外旅行 </a > </li >
     
       <li > <a href="#" >PC </a > </li >
  </ul >
 </div >

▶ menu.css

■ 出力

 #menu ul li {
     list-style-type: none;
     float: left;
     display: block; 
     padding-right: 20px;
}
     
#menu ul li ul {
      position: absolute;
      padding: 0px 0px 0px 0px;
}
     
#menu ul li ul li {
     display: none;
     float: none;
}
     
#menu ul li.dropdown:hover ul li {
     display: block;
     background-color: yellow;
}

サブメニューを認識しやすいように　色付けした
background-color: yellow;

更に見やすくする

以下のコードを追加すると、見やすいメニューとなる。

▶ menu.css （追加分コードのみ）

#menu ul li.dropdown ul li:hover,
#menu ul li:hover {
       background-color: lightgreen;
}

■ 出力

html,css,メニュー,プルダウンメニュー,最小限

CSS3で上下のブロックを入れ替えしたい、レスポンシブデザイン

レスポンシブデザインを使って、スマホ画面上での上下のブロックの入れ替えをしたい。


▶ index.html

　<div class="row" >
 <div id="left-block" >
  A
 </div >
 <div id="center-block" >
  B
 </div >
</div >

パソコン画面上では

通常スマホ画面上では

AブロックとBブロックを上下で入れ替えるには

▶ template.css

.row {
 display: flex;
 flex-direction: column-reverse;
}

を記述すると、上下が入れ替わる。
ただし、古いブラウザーに対応するには、別な記述をしなければならない。

CSS,javascript,上下,class,reverse

Joomla3.xテンプレート作成方法ー08

Joomla3 テンプレート作成　その8

”検索.....”というラベルを消したい

ラベルはモジュール設定で消すことができなかった。

CSSファイルで非表示にするしか方法は見つからなかった。

.search label.element-invisible {
display: none;
}

Joomla3.xテンプレート作成方法ー07

Joomla3 テンプレート作成　その7

ツールチップを非表示にする

マウスの矢印を特定の文字の上に置いている時だけ、特定の文字に関する情報が表示される。これをツールチップという。

Joomla のテンプレートを作成している上で、ツールチップの表示位置が意図しない位置で表示されることがある。

今回は、一時回避的な手法で、ツールチップを非表示する。
Javascript を利用して、特定のタグや文字を削除することで、ツールチップを非表示にする。

＜ 方法 ＞

javascript を index.php ファイルに挿入するだけ。

挿入文字

<script type="text/javascript">
function tooltipoff() {
 var sampleNode=document.getElementById("categorylist_header_title");
 sampleNode.innerHTML=sampleNode.innerHTML.replace(/top/i,'');
 var sampleNode=document.getElementById("categorylist_header_author");
 sampleNode.innerHTML=sampleNode.innerHTML.replace(/top/i,'');
 var sampleNode=document.getElementById("categorylist_header_hits");
 sampleNode.innerHTML=sampleNode.innerHTML.replace(/top/i,'');
}
window.onload=tooltipoff;

</script>

＜ 補足 ＞
「メニュー設定」時に「カテゴリー一覧」を選択すると。ホームページ上で、タイトル、投稿者、参照数などの一覧が表示される。

<th id="categorylist_header_title"> 〜 タイトル 〜 </th>
<th id="categorylist_header_author"> 〜 投稿者 〜 </th>
<th id="categorylist_header_hits"> 〜 参照数 〜 </th>

上記のそれぞれの data-placement="top" を data-placement="" にすればいい。
Javascript では top を 空 に置き換えている。

これは、一時しのぎで根本的な解決でないことは・・・・、あしからず。


根本的な可決は、Bootstrap ツールチップ をキーワードに検索してみる。

Joomla3.xテンプレート作成方法ー06

Joomla3 テンプレート作成　その6

モジュールのタイトル名を表示する

モジュールのタイトル名を表示するためには、
1) Joomla3.xの標準のテンプレートに使用されているファイルを利用する。
2) テンプレート中に<jdoc:include・・・style=・・・> を記述する。

Joomla3.xのテンプレートファイルをコピーする

標準テンプレート protostar フォルダーから、html フォルダーと同フォルダー内にあるmodules.php ファイルをコピーする。modules.php はモジュールのタイトル名を表示するプログラム。

style="well" の記述

<jdoc:include type="modules" name="position-3" />

でモジュールを呼び出し、表示する。
style="スタイル名" を付け加えることで、スタイル設定とモジュールのタイトル名が表示される。

標準テンプレートのファイルを利用する場合
style="well" を記述すると、次のようになる。

<jdoc:include type="modules" name="position-3" style="well" />

デザインはCSS ファイルに .well { } で記述。

Joomla3.xテンプレート作成方法ー05

Joomla3 テンプレート作成　その5

サイト名表示(2)

その３では、ヘッダーにサイト名を直接記述しただけだった。
そこで、管理でサイト名を設定したものをそのままテンプレートに反映させる方法。
表示はリンクされ、クリックするとトップーページに移動する。
※PHPについて知らなくても、”サイト名表示”の作業は可能だが、あったほうが応用的なことが可能になる。




index.php に記述する


（１） 記述１　（パラメーター呼び出し）

 <?php
$app             = JFactory::getApplication();
$sitename = $app->get('sitename');

// Logo file or site title param
if ($this->params->get('logoFile'))
{
  $logo = '<img src="' . JUri::root() . 
$this->params->get('logoFile') . '" alt="' . $sitename . '" />';
}
elseif ($this->params->get('sitetitle'))
{
  $logo = '<span class="site-title" title="' .
 $sitename . '">' . htmlspecialchars($this->params->
get('sitetitle'), ENT_COMPAT, 'UTF-8') . '</span>';
}
else
{
  $logo = '<span class="site-title" title="' . 
$sitename . '">' . $sitename . '</span>';
}
?>

(2) 記述2　（表示）


<!DOCTYPE html>以降に次のHTMLとPHPコードを記述

<a class="sitename-link" href="<?php echo $this->baseurl; ?>/">

<?php echo $logo; ?>

<?php if ($this->params->get('sitedescription')) : ?>

 <?php echo '<div class="site-description">' . 
htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>

<?php endif; ?>

</a>

デザインはCSS ファイルに .well { } で記述。