このサイトjoomla3で動かしてるんだけど、一生懸命頑張ってるんだけど、ソース見たら、大好きなbootstrapがバージョン2なんです。それが気になって気になって寝れないから、そんな自分に気がついたから…

joomla3でbootstrap3が動くテンプレートを自作しまぁす!(小保方さん風に)

HEADに苦労しています

まずは、<jdoc:include type="head" />が吐くヘッドタグ。気に入らない。

"/libraries/joomla/document/html/renderer/head.php"

こいつを編集。

あーすっきり、とおもったら、こいつを変に編集したら管理画面のメニューが動かなくなることを発見、管理画面側もBOOTSTARP動いてるのね。

で、コメントアウト少し戻してまともになったので、思い切って本体に反映!

新型テンプレートに着せ替え 2014/08/02 02:03

BOOTSTRAP3が動いてるってだけで、カコヨクないね~(外国のお土産物屋産風に)おもったけど、適当にjoomlaのタグ書くだけでテンプレート動くからある意味楽勝。
このテンプレの印象は、動作が軽いかな  ?

<jdoc:include type="head" />のJSとBOOTSTRAP3のJSがトグルメニューで衝突。

なので、<jdoc:include type="head" />を表示させず、独自にheadタグを出力することにした。
それぐらい犠牲にしてもBOOTSTRAP3のトグルメニュー等を大事にしたい。レスポンシブサイトはアクセス数がいいからね。

  • bootstrap2とbootstrap3を混在させるとnavbar-collapse collapse のトグルがおかしくなる事から全てが始まる。
  • テンプレートの<jdoc:include type="head" />削除
  • テンプレート側は固定でCSSとJSの読み込み(テンプレートフォルダから)
  • "/libraries/joomla/document/html/renderer/head.php"は編集するのを中止
  • 上記ファイルが出力してるJSファイルを読み込みしないと、管理画面に悪影響
  • 現在の状況でも、管理テンプレートisisだと記事のヘッドタグやプルダウンメニューがおかしい(bootstrap2の影響下?)
  • よって、管理画面をhathorにして使用している、hathorは全機能OK。
  • JDOC的なオブジェクトからひっぱてきて、見よう見まねで<head>内タグを個別に生成。
  • メニュー部分の自動生成されるHTMLのクラスが、nav-pillsとかなので、Jqueryでメニュー部分を書き換え。

時間がかかった作業

  • BOOTSTRAP2のクラスを3用にjqueryで変更、appendやwrapをいちいち調べながら書いた(正直面倒臭い)。
  • JFactory系クラス?をいちいち調べながら書いている

 この時点での感想

  • 一番はかどるBGMがBOOWYだったのに驚く。
  • Joomla!がネイティブにbootstrap3に対応していれば、こんな作業不必要なのに!
  • デタラメに作っているテンプレートなのに、あっさり・記事・ナビ等の各モジュールが表示されJoomla!の凄さにひれふす

 ヘッドを元に戻す 2014/08/07

コードをハイライト表示してくれるプラグインを入れたら、当然のごとく<jdoc:include type="head" />を書いてないのでプラグインが動かない。これでは困ったと、<jdoc:include type="head" />を書き込む。
結局、<jdoc:include type="head" />のコードの下に、自分で書いている<head>用コードが出る。bootstrapの呼び出しコードも2重になって気持ち悪い。しかし、コードハイライターは使いたいのでしょうがないとあきらめる。

  • 問題発生 head内を元に戻したにも関わらず、isisの管理画面でプルダウンメニューが動かない。おそらくトグルの当りがうまくいってないのではないかと予測。

ページネイションを設置

  • この記事参照 bootstrap2から3のページネイションに変更、該当<ul>タグのclassを書けばいいだけなのに、なぜか話が長い。Joomla3.3のbootstrap3使用は、細かいクラスなどいちいち変更しなくてはならない、そしてそのたびに検索して情報探すのが、時給900円以上もらいたいぐらい面倒。coreファイルにまで手を入れずにどうするか?なんて悩んでいると時間は刻一刻と経ってゆく。思えば、bootstrap3によく似たテンプレートを入手してカスタムすればよかった。

フッター、背景、ヘッダーを作成 2014/10/04

  • 画像を加工して、テンプレートのimgの中に入れて、FTP、その後、index.phpとtemplate.cssを更新。ヘッダー画像はメディアクエリでwith980以下は非表示にした。最近はアメリカンな味付けが好みなのでアメリカっぽいデザインにしてみた。

泣く泣くbootstrapを2に戻す 2015/02/05

オリジナルテンプレート、bootstrap3で動くように頑張ってみたのですが、ついに断念。
管理画面に影響がでて、使い心地がよくないのでbootstrap2に戻しました。
というのも、3用のcssを2用に書き換えるだけです。関数とかそういうのはそのままです。
正直、Bootstrapは3のほうが使い勝手が明らかに良いと感じるので早くコアが3に対応して欲しいです。
 
COREのオーバーライド方法をJDOCで発見 2015/02/06
 
Joomla!コアのオーバーライド方法見つけた! こんなん知らずに自作テンプレートだなんて、笑える>俺。
全てはこのページで謎が解けた!
理解に欠けているようなので、JDOCをJAPIをROMりますわ!正直赤面ものでーす!
 

Joomla! 好き、しかしMVC知らず 2015/02/21

このjoomla!テンプレート自作、まだまだ止まりませんよ。2014/10/24にこの記事を公開して時間は立っておりますが、実体化は進んでおりませんが今、勉強をしております。

今回、まったくもって驚いたのは、「joomal!はMVCで設計されているということを筆者は知らなかった」という恐ろしい事実でした。

この、Mモデル、Vビュー、Cコントローラーというのを知らずにテンプレート自作に挑むなど、
アラレちゃんの居ない、「Drスランプ アラレちゃん」
坊屋春道と、武装戦線の居ない「クローズ」
みたいなもんです。

ヘルパークラスなどの説明や、上記のコアのオーバーライドなど、どうもピンときてなかったのですが、MVCを知らないんじゃしょうがありません。
というわけで、MVCってなんやねん?ってところからお勉強中です。

Objective-PHP.net さんを何回も読ませてもらっています、Jooma!DOCの Developing a MVC Component/Introduction も読んでいます。

あと、上記に書いてるコアのオーバーライドですが、Joomla!3.2以降はテンプレートの編集ページで、簡単にオーバーライド出来るようです。
Creating Overrides にきっちり説明してあって、ドキュメントを読んでない自分にショックを受けました。記事やモジュールの管理だけではなく、Joomla!の機能を利用した開発を行うにはMVCなどの知識が必要ってことがわかりました。
MVCを知らないのは、HTML,CSS、JSそして、PERLのCGI、PHPなどの手続き型プログラムを少しかじったくらいでゴキゲンになっていたからだろう。

オブジェクト型プログラミングとMVCを学ぶべきだと感じています。何も知りませんが、JAVAを学習すればそれらが解決するのかな?と思っています。
MVC自体知らなかった自分が、今はMVCの存在を知り、Joomla!のプラグインのイベントのタイミングやイベントの種類などの存在を知りつつあります。

以前全く知らないことを、ひたすらJoomla!Document を読むことだけでも、じりじりとミリ単位で進化していく自分を感じます。

まだまだ、テンプレート開発続くぜ!

2015/06/13 Sun  

モジュールのオーバーライド方法とHEADタグのカスタマイズ方法がわかったので、テンプレートカスタマイズ第二段階へ突入。この記事の公開日時を見るとカスタマイズが始まったのは約半年前、この記事を読み直してみると知識が未熟なのがよくわかる。我ながらサムイと感じるが記念に残しておこうと思う。