如何创建一个WordPress自定义主题

Apple苹果ID教程 GV号码网 2年前 (2023-03-27) 97次浏览

WordPress占据了全球网站的巨大比例,占目前所有在线网站的37%。虽然这一成功有许多原因和因素,但其中一个主要原因是所有用户都可以使用的功能的普及。插件、主题、帖子、页面、类别、分类、用户角色和媒体处理等等。为了充分利用WordPress,建议用户学习和学习如何使用所有这些特性。在本博客中,我们将重点讨论WordPress主题,并将带您了解如何创建WordPress自定义主题所需的基础知识。什么是自定义主题?

你网站前端的所有东西都是使用一个叫做“主题”的东西来运行和控制的。一个网站的主题负责网站的具体设计和功能。你可以查看WordPress主题库或Themeforest主题示例;在这里,你可以找到数以千计的主题供你探索和下载。虽然已经建立的WordPress主题很好,但如果你有能力和需要,你可能还想为客户、为自己构建自己的自定义主题,或者提交到市场上出售它。在创建一个商业主题时,你需要遵循市场指南的编码标准、文件和文件夹的结构等。你可以在市场网站上找到更多关于这些指导方针的细节。在这篇博客中,我们将通过一个教程向你展示如何创建你自己的WordPress主题的基本概况,涵盖与此过程相关的所有基础知识和步骤。WordPress主题是用模板文件、脚本、样式、图像等构建的。要继续,您应该具备PHP、HTML和CSS的工作知识,这是构建自定义主题所必需的。理解JavaScript也是一个额外的优势。首先,我们将主题命名为“Updraft”。在wp-content/themes中创建一个名为“Updraft”的文件夹。在这个“Updraft”文件夹中,您将编写主题相关代码、存储文件、图像、字体等。自定义WordPress主题的主要文件是:

style.css index.php functions.php ” style.css将是主要的样式表文件,你可以在这个文件中添加所有的CSS。记住,必须包含关于主题的信息标头。标题应该看起来类似于下面的格式,并位于style.css的顶部。/ *

主题名称:上升气流主题URI: https://updraftplus.com作者:UpdraftPlus作者的URI: https://updraftplus.com描述:为网站建立的自定义主题。版本:1.0许可:GNU通用公共许可证v2或更高版本许可证URI: https://www.gnu.org/licenses/gpl-2.0.html文本域:上升气流* /

接下来,转到外观>>主题,在那里你会看到你的主题列出。激活它。当你检查你的网站的前面,它将显示一个空白的屏幕-因为我们还没有添加任何主题。记住把你的图片、脚本和样式存储到你的主题目录中。主题目录指的是“wp-content/themes/Updraft”文件夹。确保使用良好的文件夹结构来组织它们,为图像、脚本和样式创建特定的文件夹;将文件复制到各自的目录中。Functions .php是一个可以为不同目的添加代码的文件。该文件在WordPress初始化时自动加载,其中编写的代码自动执行。functions.php文件中的以下操作通常按以下顺序执行:

将主题样式表和脚本排队(将JS和CSS文件添加到网站中)。启用侧边栏,导航菜单,后缩略图等。定义整个应用程序中使用的函数。等。用户可以从functions.php文件中添加他们的样式和脚本,如下所示。有关更多文档,请参阅下面的链接。

函数include_js_css() {Wp_register_style (” bootstrap “, get_stylesheet_directory_uri()。” /styles/bootstrap.min.css “, array(), false, ” all “);wp_enqueue_style(“引导”);wp_register_script(“引导”,get_stylesheet_directory_uri()。’ /scripts/bootstrap.min.js ‘, array(), false, true);wp_enqueue_script(“引导”);}add_action(“wp_enqueue_scripts”、“include_js_css”);get_stylesheet_directory_uri()函数给出了活动主题目录的相对路径。其余的代码可以看作是资产的路径。同样,添加导航菜单,Post缩略图:

函数updraft_theme_setup(){add_theme_support(‘post-thumbnails’);register_nav_menus (数组(‘primary’ => __(‘primary Menu’),’footer1=’ => __(‘Footer Menu’),’shop’ => __(‘shop Page Menu’),));} add_action(‘after_setup_theme’, ‘updraft_theme_setup’);/*模板名称:职业* /接下来,进入页面编辑部分,从页面属性框下分配这个“职业”模板。

现在当你访问职业页面-从Career .php的代码将被执行。你的网站将在所有页面上有一个共同的头文件。您可以将这个公共标头放入header.php中。头代码类似这样:

< html >头 > > < /头身体< >wp_nav_menu (阵列(“theme_location”= >“初级”,’ container_class ‘ = > ‘菜单’,));? >设置好头文件后,使用get_header()函数将该文件包含到其他模板中。与头文件类似,页脚的通用代码将放在Footer .php模板中。

这里,使用wp_footer()在此位置插入元素,特别是脚本。使用get_footer()将在其他地方包含此文件的内容。侧边栏是一个垂直的列,用于显示站点上没有在主要内容中显示的信息。它可能包括流行文章、广告横幅、通讯提交表格等。侧边栏包含管理员可以自定义的小部件。php模板将包括您的站点小部件。在本例中,我们将通过将下面的代码添加到functions.php文件中来创建一个基本的侧栏。

函数updraft_widget_init () {register_sidebar (阵列(‘name’ => esc_html__(Home Sidebar’),“id”= >“sidebar-1’,’description’ => esc_html__(‘在这里添加小部件以显示在侧边栏中。”),’before_widget’ => ‘ ‘,“after_widget”= >“节”,’before_title’ => ‘ ‘,“after_title”= >

,));}Add_action (‘widgets_init’, ‘updraft_widgets_init’);

接下来,进入外观>>小部件。在这里您将找到上面的侧栏。在本例中,我们将向侧边栏添加一些小部件。要将此侧栏添加到前端,请在sidebar.php中添加以下代码。

If (is_active_sidebar(‘ sidebbar -1’)) {dynamic_sidebar(“sidebar-1”);}? >

get_header ();? >

While (have_posts()):the_post ();? >If (has_post_thumbnail()):the_post_thumbnail ();endif;? >头> < /

endwhile;? >

get_footer ();类似的代码将放在single.php文件中以显示发布信息。为了正确呈现文章列表(你的index.php),除了上面的方法-你可能还想使用以下方法:

the_category():显示文章的类别列表。the_permalink():显示当前文章的永久链接。the_摘录():显示文章摘录。在构建自定义主题时,请记住它应该以支持国际化的方式开发。通过这样做,你的主题可以很容易地被翻译成其他语言。要添加I18n支持,记得使用文本域,您可以解析源文件并从中提取可翻译的字符串。在这个例子中,我们使用的是文本域“Updraft”,但是你可以选择任何唯一的标识符。我们可以如下定义文本域。

函数i18n_setup() {Load_theme_textdomain (‘updraft’, get_stylesheet_directory()。’ /语言’);}Add_action (‘after_setup_theme’, ‘i18n_setup’);现在,当你在你的主题文件中使用静态字符串时,将它们包装在__()或_e()函数中。

有一些特殊的工具,如POEDIT,可以帮助生成翻译后的语言文件。更多信息请参考这个博客。

这篇博客涵盖了创建WordPress自定义主题的基础知识。然而,这是一个庞大的话题,需要大量的时间和耐心。下面是一些有用的资源,你应该了解,将帮助你开始创建你的WordPress主题。当你为你的WordPress网站创建一个新的主题时,记住你需要在每次更改后备份它,否则你的工作就会丢失。使用UpdraftPlus -世界领先和最值得信任的WordPress备份,恢复和克隆插件。

喜欢 (0)