に関してDomTabsを取付けなさい
Probloggerの新しい設計と着いたことブログの傾向はある domtabs.
DOMタブ それらは私達が意図するおよび後方に別の内容のための使用中の前にあったスペースを使用してページにより多くの内容を含めることを割り当てるべき大きい利点セクションに従って内容を示すことを割り当てるナビゲーション・システムである。
適切私はサイドバーでMUIOMUIOでDomTabsの半分のmanhosa版をここに、私「言う部品を見ることができる有する研究の初めおよび好み「、ユーザーサポートジヤバ・スクリプトを包装するか、またはそれ活動化させないそのような方法で常にある内容をすべて示すこと可能が持っている。 個人指導の1つの間に彼らはdomtabsが効果に同じを与えるが、ついに私が加えるべきすべてを変更できるノートを有することを見ることを行く。
続かれること個人指導の1つはショーに内容を関連付ければWordPressのユーザーのためのdireccionado他のプラットホームのために続くべきステップである基本的にコードの明らかな変化との同じ物ことであるが。
に関して5つのステップにdomtabsを取付けなさい
- 最初に作らなければならない ダウンロード 原稿の。 この必要な時の版は3.1415927である。
- 今度はfiling-cabinetを置かなければならない domtab.js あなたの同じdirectoria主題。
- domtabのコードHTMLに適切な教室がある:
tabClass: 「domtab」、動きでタブのためのナビゲーション・システムを置く//のクラス
listClass: 「domtabs」、メニューの//のクラス
activeClass: 「それは」、リンク流れの//のクラス活動化する
contentElements: 「div」は、//タブを分けることを割り当てること私が続けるプロシージャのための要素を確認した
backToLinks: /#top/のユーザーはタブの上(メニューことを)に戻りたいと思うかどうか確認することを割り当てる//の標準
printID: 「domtabprintview」、すべてを印刷するリンクへの// IDのatribuida
showAllLinkText: 「印刷物にすべての内容」を、リンクのための//のテキストすべて示しなさいあなたのレイアウトにdomtabsを合わせるCSSによるこれらのタブのポッドを使用して。 domtabsを編集するために基本的なもののfiling-cabinet CSSが囲まれているfiling-cabinetsの終わりのdisponibilizoのダウンロード。 後でそれはテストするべき質問である。
- 今度は、wordpressで、それはfiling-cabinetを編集する header.php 札ヘッド/head <間の>< e> それは次のコードを置く:
<原稿のtype=の「テキストかジヤバ・スクリプト」 src= 「<か。 phpのbloginfo (「template_directory」); >/domtab.js 「>< /script><リンクrel=の「stylesheet」のtype=の「テキストかcss」 href= 「<か。 phpのbloginfo (「template_directory」); >/domtab.cssの「media=」スクリーンの「/>
Ambos os ficheiros estão disponíveis para download no final do artigo.
- Agora edita o ficheiro onde queres colocar as domtabs, provavelmente será sidebar.php mas há quem as coloque noutro local. Insere o seguinte código:
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>Primeira TAB: Aqui inseres o conteúdo da tab</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>Segunda TAB: Aqui inseres o conteúdo da tab</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>Terceira TAB: Aqui inseres o conteúdo da tab</p>
</div>
</div>
Agora guarda o ficheiro e testa. Caso queiras adicionar uma nova tab basta copiares o texto a partir dos DIVs, por exemplo:
Adicionar uma quarta tab
<div>
<a name="t4" id="t4"></a>
<p>Tab 4: Aqui inseres o conteúdo da tab</p>
</div>
E pronto agora deverás ter as domtabs a funcionar correctamente.
Nota:
Caso as tuas domtabs não funcionem correctamente, seja qual for o motivo, coloca o conteúdo delas dentro de um ficheiro á parte como tab1.php e depois usa a função include para incluires esse ficheiro onde queres.
Quero incluir uma nuvem de tags usando uma função dada pelo Wordpress ou um Plugin:
- Crio o ficheiro tab1.php e dentro dele incluo a tag: wp_tag_cloud();
- Agora na tab coloco o código para chamar esse ficheiro
<div>
<a name="t1" id="t1"></a>
<?php include(’tab1.php’); ?gt;
</div>
Agora testa e já deve correr tudo correctamente :cool:
Link úteis:
Domtabs - http://www.onlinetools.org/tools/domtabdata/
Ficheiros do tutorial + tutorial: http://www.box.net/shared/abzaqv9k48
Alternativas ao domtabs: idTabs / jQuery Tabs 3
2 Comments
Comments RSS TrackBack Identifier URI
Leave a comment
[...] agora apenas faço referencia ás domtabs na sidebar e live comment preview e a mascote que ainda não tem nome portanto aceitam-se [...]
Boas. Tentei instalar as domtabs num novo blog que estou a fazer e acontece-me um problema que não estou a conseguir resolver.
A domtab funciona bem na index mas depois quando vou para uma página de um artigo o link das tabs aparece com o link do próprio artigo e as domtabs não funcionam.
O link na index aparece assim http://site/#t1 e na página do artigo aparece assim http://site/artigo/#t1
Será que me podes ajudar??
Abraços