dedecms dreamweaver モバイル テンプレートの使用と作成の概要

dedecms システムの最新バージョンでは、携帯電話用のデザインが多数追加されました。Dream Weaver その後。 update、デフォルト デフォルトのテンプレートには携帯電話のテンプレートが含まれているため、Dedecms Web サイト、コンピューター Web サイトの PC テンプレート、およびモバイル WAP テンプレートのデュアル テンプレートをデザインできます。 以下では、Dedecms Dede の使用方法と作成方法を紹介します。必要に応じて、それを参照してください。

テンプレートを作成するときは、通常、Dreamweaver のデフォルト テンプレートでのタグの使用方法を参照します。次に、Dreamweaver のデフォルト テンプレートでの携帯電話のテンプレートの使用方法を分析します。

注: このチュートリアルは、Dreamweaver テンプレート開発の経験を持つウェブマスターに適しています。初心者の場合は、まず Dreamweaver の PC テンプレート開発に慣れることをお勧めします

1。新しいDreamWeaverデフォルトのテンプレートに加えて、テンプレートに加えて、メインの携帯電話テンプレートは次のとおりですarticle_default_m.htm コンテンツ ページのデフォルト テンプレート

search_m.htm 検索ページ テンプレート

head_m.htm 上部のテンプレート

footer_m.htm 下部のテンプレート

dedecms テンプレートのダウンロード アドレス: www.php.cn/xia i/code /dedecms

DreamWeaver Web サイトのテンプレートの作成に慣れているウェブマスターは、これらのモバイル テンプレートの使用方法と作成方法を大まかに理解できます。これらのモバイル テンプレートと PC テンプレートの作成方法にはいくつかの違いがあります。その違いについて説明します。

2. 携帯電話用テンプレートと PC 用テンプレートの違い

(1) 携帯電話用テンプレートの名前が異なります

上記の携帯電話用テンプレートの名前から、両者の名前の違いがわかります。携帯電話用テンプレートと PC 用テンプレート たとえば、PC ホームページ テンプレートは Index.htm、対応する携帯電話用テンプレートは Index_m.htm、PC リスト ページ テンプレートは list_article.htm となります。対応する携帯電話リストページのテンプレートは list_article_m.htm です。また、PC テンプレートを作成する場合は、PC テンプレートがあるはずです。アクセスしたときに対応するページが正常に表示されるように、対応する携帯電話テンプレートを作成し、上記のように名前を付けます。コンピューターや携帯電話で。

(2) モバイルテンプレートで呼び出されるリソースの場所が異なります

PCテンプレートを作成する場合、呼び出されるcss、js、画像はすべてテンプレートフォルダー内にあります。デフォルトのテンプレートにはすべてが含まれています。モバイル テンプレートによって呼び出される CSS、JS、画像、その他のリソースはすべて、Web サイトのルート ディレクトリ /m/assets フォルダーにあります。

もちろん、モバイル テンプレート内のリソースの呼び出し場所をテンプレート フォルダーに設定することもできます。しかし、分析したところ、別の PC テンプレートを作成して既存の携帯電話テンプレートを追加したい場合に、この方法でデフォルトの携帯電話テンプレート リソースを呼び出すことが有益であることがわかりました。新しい PC テンプレート内にある場合は、携帯電話のテンプレート ファイルを新しい PC テンプレートにコピーするだけでよく、携帯電話の css や js などのリソースには触れる必要はありません。簡単に言えば、携帯電話のリソース管理に便利です。 そのため、携帯電話テンプレートのリソースは、デフォルトのテンプレートと同様に、ルート ディレクトリの対応するフォルダーに配置することをお勧めします。

(3) Web サイトのルート ディレクトリにある m フォルダー

New Dreamweaver のルート ディレクトリに m フォルダーがあります。これは、携帯電話からアクセスされるフォルダーです。 mフォルダーの下にあります。また、m フォルダの下には、index.php、list.php、view.php があり、実際にモバイルサイトにアクセスする際には、この 3 つのファイルにアクセスして動的にモバイルサイトにアクセスします。 そのため、コンピューターを使用してモバイル Web サイトを確認したい場合は、http://ドメイン名/m にアクセスすると、モバイル Web サイトを確認できます。

(4) PCテンプレートでの設定 携帯電話でWebサイトにアクセスすると、自動的に携帯電話テンプレートにジャンプします。そのためには、PCテンプレートにジャンプJSコードを追加する必要があります。

にコードを追加します。

* 次のコードをホームページ テンプレートに追加します:

コードは次のとおりです:

<meta http-equiv="mobile-agent" content="
for
mat=xhtml;url={dede:global.cfg_mobileurl/}/index.php"></p>
<p><script type="text/
javascript
">
if
(window.location.to
String
().indexOf(&#39;pref=padindex&#39;) != -1){}
else
</p>
<p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p>
<p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-</p>
<p>|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?</p>
<p>mobile")<0){try{if(/
Android
|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p>
<p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/index.php";}else if</p>
<p>(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

* 次のコードをリスト ページ テンプレートに追加します:

コードは次のとおりです:

<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}"></p>
<p><script type="text/javascript">if(window.location.toString().indexOf(&#39;pref=padindex&#39;) != -1){}else</p>
<p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p>
<p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-</p>
<p>|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?</p>
<p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p>
<p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid=</p>
<p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

* コンテンツ ページのテンプレートに次のコードを追加します

コード 次のように:

<meta http-equiv="mobile-agent" content="format=xhtml;
url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}">
</p>
<p><script type="text/javascript">if(window.location.toString().indexOf(&#39;pref=padindex&#39;) != -1){}else</p>
<p>{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||</p>
<p>(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?</p>
<p>mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test</p>
<p>(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid=</p>
<p>{dede:field.id/}";}else if(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}</script>

上記の js は、コンピューター Web サイトからモバイル Web サイトにジャンプするコードであり、 は、Baidu にモバイル Web サイトのアドレスを伝えるために使用され、主に SEO に使用されます。 上記のコードをPCテンプレートに追加した後、携帯電話がWebサイトにアクセスすると、自動的にモバイルWebサイトテンプレートにジャンプします。

(5)モバイルテンプレートの設定

刚才说过了手机网站访问的是网站根目录的m文件夹下的index.php，list.php，view.php ，手机网站是访问动态页面，而不像pc站中的静态页面。

手机模板制作时，有两个地方和pc模板不同。

一、栏目超链接不同

在pc模板中，如导航栏，栏目超链接调用如下：

代码如下:

{dede:channel type='
top
&#39; row=&#39;10&#39; }</p>
<p><a href=&#39;[field:typeurl/]&#39; >这是栏目内容</a></p>
<p>{/dede:channel}

手机模板调用栏目超链接代码如下：

代码如下:

{dede:channel type=&#39;top&#39; row=&#39;10&#39; }</p>
<p><a href=&#39;list.php?tid=[field:id/]&#39; >这是栏目内容</a></p>
<p>{/dede:channel}

二、文章列表超链接不同

pc模板中文章列表超链接调用代码如下：

代码如下:

{dede:arclist row=&#39;10&#39; }</p>
<p><a href=&#39;[field:arcurl/]&#39; >这是文章标题</a></p>
<p>{/dede:arclist}

手机模板调用文章列表超链接代码如下：

代码如下:

{dede:arclist row=&#39;10&#39; }</p>
<p><a href=&#39;view.php?aid=[field:id/]&#39; >这是文章标题</a></p>
<p>{/dede:arclist}

除了这两个超链接不一样，其他的织梦标签通用。

（6）默认的手机搜索页模板search_m.htm不能用

经测试发现，默认的手机搜索模板search_m.htm不能用，但用手机搜索时，搜索结果用的是pc搜索模板search.htm 。

这是因为手机模板中搜索也是调用的pc站的搜索功能。如果需要让手机网站可以调用search_m.htm ，就需要单独设置搜索功能页面。

总结

好了，按照以上的步骤完成pc站的跳转，和手机站链接的注意事项，你就可以开始做自己的织梦手机模板了，方法和pc站模板开发类似。开发时，可以多参考默认default的手机模板。感兴趣的朋友们快去动手试试吧，如果有疑问可以留言交流，小编会尽快给大家回复的。

以上がdedecms dreamweaver モバイル テンプレートの使用と作成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。