b1gc8v 发表于 2024-10-6 10:56:03

WP主题研发06：wordpress主题模板的整体结构


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">wordpress主题的静态模板编写好后，<span style="color: black;">咱们</span>就<span style="color: black;">能够</span>正式进入到wordpress主题动态模板的<span style="color: black;">研发</span>之中。<span style="color: black;">所说</span>动态模板，<span style="color: black;">便是</span><span style="color: black;">经过</span>wordpress程序<span style="color: black;">供给</span>的PHP函数和PHP语法，调用wordpress数据库中的数据，在wordpress网站的前端静态模板中展示，网站有任何动静，都可<span style="color: black;">经过</span>动态模板在前端表现出来。在<span style="color: black;">研发</span>wordpress主题的动态模板之前，<span style="color: black;">咱们</span>有必要先<span style="color: black;">认识</span>一下wordpress动态模板的整体结构。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">一：wordpress动态模板的必须选项。</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">所说</span>必须选项，<span style="color: black;">便是</span>wordpress动态模板必不可少的。<span style="color: black;">大众</span><span style="color: black;">能够</span>跟随我的动作，<span style="color: black;">一块</span>来演示一下。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">1、创建一个主题目录。</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>进入到wordpress程序下的 /wp-content/themes/ 目录，在这个目录下新建一个 trans 目录（你<span style="color: black;">亦</span><span style="color: black;">能够</span>用其它的名<span style="color: black;">叫作</span>），这<span style="color: black;">亦</span>就等于给当前wordpress网站创建了一个新主题模板，模板名叫：trans 。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">2、创建一个模板的CSS样式文件。</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">添加好模板目录后，<span style="color: black;">咱们</span><span style="color: black;">能够</span>在wordpress后台的外观下的主题的界面中看到<span style="color: black;">关联</span>提示：“损坏的主题，下列主题已安装，但不完整。缺少样式表。”（ 如下图）。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/827422cb11144bed91575cdd9df6afb0~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=IYiQRVo5pKRkgVeYpQzZuMrZZe4%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在trans目录下创建一个CSS样式文件sytle.css 。这个文件名必须是style，否则无效。这个文件是wordpress动态模板所必须要有的，<span style="color: black;">倘若</span>缺少，就<span style="color: black;">马上</span>报错。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3、创建一个首页模板。</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">添加完这个CSS的样式表文件，<span style="color: black;">咱们</span>再来看后台主题界面，<span style="color: black;">此时</span>，<span style="color: black;">咱们</span><span style="color: black;">发掘</span>有<span style="color: black;">另一</span>一种提示：“损坏的主题。模板丢失。独立主题需要有 index.php模板文件“。如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/pgc-image/a0f57d644c2648a4bf767e7070e085ba~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=9Lv7%2B8aT3cK%2B%2BBnNMVg19dJj%2F20%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">亦</span><span style="color: black;">便是</span>说，wordpress动态模板必须要有一个首页模板——index.php ，<span style="color: black;">倘若</span>缺少，就会报<span style="color: black;">这般</span>的错误。<span style="color: black;">因此</span>，<span style="color: black;">咱们</span>再在trans目录下创建一个index.php文件。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">4、添加trans主题动态模板的后台缩略图。</strong></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">添加完index.php首页模板后，我再回到wordpress网站的后台的外观主题界面看一下，<span style="color: black;">此时</span>，就<span style="color: black;">无</span>再报错了，这就说明：style.css这个样式表文件和index.php这个首页模板文件，是wordpress动态模板所必须的，缺少任何一个，都会报错。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span>，<span style="color: black;">咱们</span>又<span style="color: black;">发掘</span>一下问题：其它wordpress主题模板都有缩略图，<span style="color: black;">能够</span>看到大致的效果，而<span style="color: black;">咱们</span>所创建的trans主题模板<span style="color: black;">无</span>缩略图，是空白的，如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p9-sign.toutiaoimg.com/pgc-image/b5c5623b38964c70a09bf879dbf3b69d~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=t8x5A0kGkZiqlpz1gbfTQdsTybo%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此时</span>，<span style="color: black;">咱们</span>必须弄一个缩略图放进trans主题目录，这个缩略图的名字必须是screenshot，后缀<span style="color: black;">能够</span>是png、jpg、gif都可以。<span style="color: black;">咱们</span>添加完缩略图后，后台就会展示出来，如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/d31928e10d804decabf9d61f6c9d100a~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=gPuLNIClSE4ad%2FoF%2F44D9Nf%2FWTA%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上<span style="color: black;">便是</span>wordpress主题动态模板所必须的选项：style.css样式表文件、index.php首页模板文件、screenshot主题缩略图。弄好这些后，<span style="color: black;">咱们</span>就<span style="color: black;">能够</span>点击“启用”按钮，让当前wordpress网站<span style="color: black;">运用</span>这个trans主题模板。当然，这个时候启用它，前台页面是<span style="color: black;">无</span>任何<span style="color: black;">表示</span>的，是一个空白页，<span style="color: black;">由于</span>，<span style="color: black;">咱们</span><span style="color: black;">无</span>在index.php中放任何内容和调用任何数据。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">二：wordpress动态模板的可选选项。</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">弄完了wordpress动态模板的必选项，<span style="color: black;">咱们</span>的trans主题模板就<span style="color: black;">能够</span>正常<span style="color: black;">运用</span>了。<span style="color: black;">针对</span><span style="color: black;">有些</span><span style="color: black;">需要</span>性不高的wordpress网站，它们<span style="color: black;">全部</span>网站可能只需要一个页面就<span style="color: black;">能够</span>了，<span style="color: black;">例如</span>：前几年<span style="color: black;">尤其</span>流行的淘宝客主题模板，<span style="color: black;">便是</span><span style="color: black;">这般</span>的一个<span style="color: black;">状况</span>。这些淘宝客网站<span style="color: black;">无</span>任何<span style="color: black;">文案</span>数据，<span style="color: black;">她们</span><span style="color: black;">仅有</span>一个简单的首页模板，这个首页模板上展示的是<span style="color: black;">她们</span>在淘宝联盟上弄下来的<span style="color: black;">制品</span>链接和<span style="color: black;">照片</span>，只要用户点击这些<span style="color: black;">制品</span>，并进入到淘宝中消费，wordpress站长就<span style="color: black;">能够</span>赚到钱。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span>，<span style="color: black;">针对</span><span style="color: black;">咱们</span>这些认真做网站的wordpress站长<span style="color: black;">来讲</span>，<span style="color: black;">咱们</span>的wordpress网站不可能<span style="color: black;">仅有</span>一个页面，<span style="color: black;">咱们</span>的网站会有<span style="color: black;">非常多</span><span style="color: black;">非常多</span>的页面。<span style="color: black;">因此</span>， <span style="color: black;">咱们</span>在<span style="color: black;">研发</span>wordpress主题模板时，需要创建<span style="color: black;">有些</span>其它的模板文件，这<span style="color: black;">便是</span>wordpress动态模板的可选选项。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">正常的wordpress主题模板<span style="color: black;">通常</span>还会<span style="color: black;">包括</span>以下几个模板文件：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">functions.php =&gt; 主题函数文件archive.php =&gt; 列表页模板page.php =&gt; 单页面模板single.php =&gt; <span style="color: black;">文案</span>页模板404.php =&gt; 404错误页面模板header.php =&gt; 头部模板footer.php =&gt; 底部模板sidebar.php =&gt; 侧边栏模板search.php =&gt; 搜索页模板searchform.php =&gt; 搜索表单模板comments.php =&gt; 评论模板</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">还可能会<span style="color: black;">包括</span>有以下几个目录：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">images =&gt; <span style="color: black;">照片</span>文件夹js =&gt; JS文件夹css =&gt; 其它CSS样式文件夹includes =&gt; 其它PHP功能文件夹</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然，上面的可选模板文件与目录，<span style="color: black;">亦</span>不是固定不变的，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">按照</span>自己网站的<span style="color: black;">详细</span><span style="color: black;">状况</span>而。<span style="color: black;">咱们</span><span style="color: black;">能够</span>打开wordpress自带的官方主题看一下。<span style="color: black;">咱们</span>先打开twentytwenty这个主题目录看一下，它就有好多的可选模板<span style="color: black;">无</span>创建，如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f1cc2fb83e5e4e218ce1daa7f7299b88~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=hNPEXaiv66bUAOfYgXx23%2F47vTI%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>再打开另一个官方主题模板twentysixteen的目录，<span style="color: black;">咱们</span><span style="color: black;">能够</span>看到，它里面就基本上<span style="color: black;">包括</span><span style="color: black;">咱们</span>上面介绍的可选选项的模板文件。如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/8978225c20fe49c3a18832180d92e976~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=KFiZL%2B3adczqLCPb3ijA3h%2FSdxE%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">你们再来看一下由马<span style="color: black;">一直</span>蹄<span style="color: black;">研发</span>的ssmay主题，它不仅<span style="color: black;">包括</span>有必须项和可选项的主题模板文件，还<span style="color: black;">包括</span>有其它<span style="color: black;">有些</span>模板文件，如下图：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/b6fc1e59114241e993dad261ba98663e~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728359965&amp;x-signature=SRkYIHBqPXwQrjH8CBTY0nqE%2Fds%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​可见，<span style="color: black;">咱们</span>在<span style="color: black;">研发</span>wordpress动态模板时，<span style="color: black;">无</span>固定的模式，创建模板的模式不是死的，<span style="color: black;">咱们</span>要<span style="color: black;">按照</span>自己的wordpress网站的<span style="color: black;">实质</span><span style="color: black;">状况</span>，以及<span style="color: black;">按照</span>自己的<span style="color: black;">详细</span><span style="color: black;">需要</span>，来创建自己的动态模板的文件。<span style="color: black;">亦</span><span style="color: black;">便是</span>说，除了上面介绍绍的动态模板的必选项以外，其它的，<span style="color: black;">咱们</span>就<span style="color: black;">能够</span>灵活发挥，不拘一格。</p>




b1gc8v 发表于 2024-10-22 17:16:50

i免费外链发布平台 http://www.fok120.com/

4lqedz 发表于 2024-10-30 20:06:21

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。
页: [1]
查看完整版本: WP主题研发06：wordpress主题模板的整体结构