标签: WordPress主题开发

  • WordPress 常用函数 / wp_unslash

    WordPress 常用函数 / wp_unslash

    简介

    删除字符串或字符串数​​组中的反斜杠。

    该函数调用 stripslashes_deep 进行反斜杠删除处理。

    用法

    <?php wp_unslash( $value ) ?>

    参数

    $value
    (string|string[]) (required) 将要删除反斜杠的字符串或者字符串数组
    Default: None

    返回值

    (string|string[])
    已删除反斜杠的值

    实例

    <?php
    echo wp_unslash($_SERVER['post_password']);
    ?>
  • WordPress 安全过滤数组 内容

    WordPress 安全过滤数组 内容

    WordPress在日常主题插件开发中,保存内容时需要使用 sanitize_text_field 函数来保证数据的安全。

    Clean everything, check everything, escape everything, and never trust the users to always have input sane data. After all, users come from all walks of life.

    但是当我们需要保存一个数组时,比如多个input框,使用同一个name时,就需要用到。这里我们写一个具体的函数

    function sanitize_text_or_array_field($array_or_string)
    	{
    		if (is_string($array_or_string)) {
    			$array_or_string = sanitize_text_field($array_or_string);
    		} elseif (is_array($array_or_string)) {
    			foreach ($array_or_string as $key => &$value) {
    				if (is_array($value)) {
    					$value = $this->sanitize_text_or_array_field($value);
    				} else {
    					$value = sanitize_text_field($value);
    				}
    			}
    		}
    		return $array_or_string;
    	}
  • WordPress 自定义文章类型 使用默认Category 翻页bug 修复 图文教程

    WordPress 自定义文章类型 使用默认Category 翻页bug 修复 图文教程

    在日常开发中,注册了自定义的文章类型,但是使用的还是默认的category分类,我们使用固定链接格式 %category%/%postname% ,翻页格式 category-name/page/2 就会出现404的错误。WordPress 会将 page 默认为post类型的文章名 , 将会返回404错误页面。

    下面我们给出修正代码:

    
    function remove_page_from_query_string($query_string)
    {
        if (isset($query_string['name']) && $query_string['name'] == 'page' && isset($query_string['page'])) {
            unset($query_string['name']);
            $pagePart = explode('/', $query_string['page']);
            $query_string['paged'] = end($pagePart);
        }
        return $query_string;
    }
    add_filter('request', 'remove_page_from_query_string');
    function fix_category_pagination($qs)
    {
        if (isset($qs['category_name']) && isset($qs['paged'])) {
            $qs['post_type'] = get_post_types(array(
                'public'   => true,
                '_builtin' => false
            ));
            array_push($qs['post_type'],'post');
        }
        return $qs;
    }
    add_filter('request', 'fix_category_pagination');
  • WordPress 创建自定义文章类型 禁用Add New 新增/添加功能

    WordPress 创建自定义文章类型 禁用Add New 新增/添加功能

    前篇我们写了 WordPress插件开发 移除 Edit | Quick Edit | Trash | View 功能 图文教程 ,即使是这样,但是创建自定义文章时依然会有Add New按钮出现,下面我们给出自定义文章类型,如何禁止Add New按钮

    $args = array(
        'label'               => __( 'Custom Post Type', 'text_domain' ),
        'description'         => __( 'Custom Post Type', 'text_domain' ),
        'capability_type' => 'custom_post_type',
        'capabilities' => array(
            'create_posts' => false,//这里禁用创建功能
        ),
    );
    register_post_type( 'custom_post_type', $args );
  • WordPress插件开发 移除 Edit | Quick Edit | Trash | View 功能 图文教程

    WordPress插件开发 移除 Edit | Quick Edit | Trash | View 功能 图文教程

    通常我们在WordPress开发中都会使用到注册新文章类型,这次遇到了需要禁用Dashboard lists 列表文章的『 编辑 | 快速编辑 | 回收站 | 查看 』功能,我们这里记录一下代码片段

    add_filter( 'post_row_actions', 'remove_row_actions', 10, 1 );
    function remove_row_actions( $actions )
    {
        if( get_post_type() === 'post' ){
            unset( $actions['edit'] );
            unset( $actions['view'] );
            unset( $actions['trash'] );
            unset( $actions['inline hide-if-no-js'] );
        }
        return $actions;
    }
  • WordPress 主题插件开发 WP_DEBUG true 无法显示错误 调试记录过程

    WordPress 主题插件开发 WP_DEBUG true 无法显示错误 调试记录过程

    近日在WordPress主题插件开发时,出现了:此站点正遇到技术问题.但是我我查了wp-config.php 里面的 WP_DEBUG 选项为 ture ,按理来讲应该会显示当前的php错误原因才对。

    同样,检查了php.ini的配置 display_erros = on 。为什么显示不了错误原因的。

    后来查了资料发现,可能是 Query Monitor 插件的问题导致的。后来我们把整个插件文件夹/wp-content/plugins/更名为别的,再次访问页面。显示出了错误原因。

  • WordPress 声音、音频主题 JSounds 在线播放音频

    WordPress 声音、音频主题 JSounds。

    主要功能

    • 自定义标签排序
    • 男女分类中搜索对应分类的音频
    • ABCS类筛选
    • 手机自适应
    • 支持多重标签、自定义文字搜索。

  • WordPress 自定义 菜单 返回数组 自定义html输出格式 图文教程

    WordPress 自定义 菜单 返回数组 自定义html输出格式 图文教程

    通常我们在WordPress模板主题开发中,会遇到自定义菜单的情况。一般我们使用 wp_nav_menu 函数来输出就行了。

    假如我们需要自定义一些链接地址或者名称的话,下面我们给出记录一下代码,可以自定义输出格式,或者数组。

    // Get the nav menu based on $menu_name (same as 'theme_location' or 'menu' arg to wp_nav_menu)
    // This code based on wp_nav_menu's code to get Menu ID from menu slug
     
    $menu_name = 'custom_menu_slug';
     
    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
     
        $menu_items = wp_get_nav_menu_items($menu->term_id);
     
        $menu_list = '<ul id="menu-' . $menu_name . '">';
     
        foreach ( (array) $menu_items as $key => $menu_item ) {
            $title = $menu_item->title;
            $url = $menu_item->url;
            $menu_list .= '<li><a href="' . $url . '">' . $title . '</a></li>';
        }
        $menu_list .= '</ul>';
    } else {
        $menu_list = '<ul><li>Menu "' . $menu_name . '" not defined.</li></ul>';
    }
    // $menu_list now ready to output
    echo $menu_list;

    官方文档:wp_get_nav_menu_items() | Function | WordPress Developer Resources

  • WordPress 的导航菜单:注册菜单位置,显示导航,相关参数,还有激活菜单项

    WordPress 的导航菜单:注册菜单位置,显示导航,相关参数,还有激活菜单项

    在设计 WordPress 主题的时候需要在主题里的模板文件里显示出我们在 WordPress 的管理后台定制的导航菜单。下面介绍一下流程跟方法。

    注册导航菜单的位置

    你可以注册多个导航菜单的位置,然后你可以在模板文件中决定什么地方使用什么位置的导航菜单。注册导航菜单位置是在主题的 functions.php 文件里。像下面这样:

    function mytheme_setup(){
     
      // 注册菜单
      register_nav_menu( 'primary', __( 'Primary Menu', 'mytheme' ) );
    }
    add_action( 'after_setup_theme', 'mytheme_setup' );

    mytheme_setup() 是我们自己创建的一个函数,函数下面的 add_action( 'after_setup_theme', 'mytheme_setup' ); 这行代码,是把我们自己创建的 mytheme_setup() 这个函数挂载到 after_setup_theme() 这个函数上面,这个函数会在 WordPress 初始化主题的时候调用,调用它的同时,也会调用我们自己的 mytheme_setup() 这个函数。

    在 mytheme_setup() 这个函数里,我们使用 register_nav_menu() 来注册了一个导航菜单的位置 … 这个位置的名字叫 primary ,名字的后面是一个描述,这个描述文件可以显示在 WordPress 的管理后台上,我们把描述文字定义成了可被翻译的字符串,你可以为它创建不同语言的翻译版本。

    注 如果在你自已的主题中应用这段代码,需要把这里所有出现的 mytheme 修改成你自己的主题的名称。

    在管理后台创建菜单

    在主题中注册了导航菜单的位置,然后打开 WordPress 管理后台,外观 – 菜单,在这里你可以创建一个菜单。然后在 主题位置 这里,你可以看到你注册的菜单位置,这里应该会显示一个 Primary Menu。点击下拉菜单,选择你想在这个位置上显示的菜单,然后 保存。

    在主题的模板文件中显示导航菜单

    目前在我们注册的导航菜单位置上已经指定了一个菜单,如果你想在主题模板文件中显示这个位置上的导航菜单,可以使用 wp_nav_menu() ,看起来像这样:

    <?php wp_nav_menu( array(
      'theme_location'     =>     'primary',
      ) );
     ?>
     

    我们设置了一下 wp_nav_menu() 的 theme_location 参数,参数的值为 primary,意思就是,我们在这里要显示在 primary 这个位置上的导航菜单。 现在,在 WordPress 的某些页面中就应该可以显示出这个导航菜单了,剩下的事儿就是为这个导航菜单添加一些自定义的样式。

    wp_nav_menu() 输出的导航菜单代码演示

    代码:

    <ul>
      <li id="menu-item-422" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-422"><a href="http://jiloc:8888/">首页</a></li>
      <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-56"><a href="http://jiloc:8888/?cat=3">真实婚礼</a>
        <ul class="sub-menu">
          <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"><a href="http://jiloc:8888/?cat=4">后院婚礼</a></li>
          <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://jiloc:8888/?cat=8">海滩婚礼</a></li>
          <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-59"><a href="http://jiloc:8888/?cat=7">绿色婚礼</a></li>
        </ul>
      </li>
    </ul>
    

    视图:

    • 首页
    • 真实婚礼
      • 后院婚礼
      • 海滩婚礼
      • 绿色婚礼

    激活菜单项

    WordPress 会在当前页面的菜单项上添加一个 .current-menu-item 类,如果当前页面是某个菜单项的子菜单,那么在这个父菜单项上会添加一个 .current-menu-ancestor 类。你可以根据这两个类在样式表里添加样式,让用户很容易区分出当前所在的位置属于哪个菜单项。

    在激活菜单项上添加自定义的 CSS 类

    我们可以在主题的 functions.php 文件里创建一个函数,用来改变添加到菜单项上的 css 类。可以使用下面的代码:

    /*
     * 给激活的导航菜单添加 .active
     */
    function mytheme_nav_menu_css_class( $classes ) {
         if ( in_array('current-menu-item', $classes ) OR in_array( 'current-menu-ancestor', $classes ) )
              $classes[]     =     'active';
         return $classes;
    }
    add_filter( 'nav_menu_css_class', 'mytheme_nav_menu_css_class' );

    上面这段代码的意思是,查找菜单项里是否有 .current-menu-item 或 .current-menu-ancestor ,如果有,那么在这个菜单项上再添加一个 .active 类。 add_filter( ‘nav_menu_css_class’, ‘mytheme_nav_menu_css_class’ ); 这行代码是把我们自己创建的函数挂载到 nab_menu_css_class() 这个函数上,它应该是为菜单项添加 css 类的函数,当 WordPress 执行这个函数的时候,同时也会执行我们自已创建的 mytheme_nav_menu_css_class() 这个函数。

    注 在自己的主题中使用这段代码,要把 mytheme 替换成你自己的主题的名称。

  • WordPress 子主题  开发 图文实例

    WordPress 子主题 开发 图文实例

    第一步

    先安装父主题

    第二步

    安装子主题,最重要的是在style.css的文件里添加一个

    Template:JSounds
    Theme name:JSounds_Child

    Template 这个是你要继承的父模板的名字

    Theme name 这是当前主题的名字

    子主题的目录结构

    子主题也是一个主题,也跟其他主题一样,放在 wp-content/themes 目录下面的文件夹中,文件夹的名称可以随便定义,为了形象一点,在示例中,我们可以新建 twentytwelve-child 这样一个文件夹存放子主题。这样的话,我们的 themes 文件夹中,至少有两个文件夹:twentytwelve、twentytwelve-child ,因为子主题要基于父主题,所以主题目录肯定要有父主题。

    在子主题中,一般有下面几个文件:

    • style.css (这个必须有)
    • functions.php (这个可以有)
    • 其他模板文件 (这个可以有)
    • 其他文件 (这个可以有)
  • WordPress 多语言 WPML 插件 自定义字段 翻译

    WordPress 多语言 WPML 插件 自定义字段 翻译

    我们在开发WordPress主题开发中,会需要用到多语言的版本。

    网上已经有很多介绍 WordPress 多语言的插件了,比如 Polylang 和 WPML 等强大的多语言插件,但是只是介绍,很快都是能掌握怎么使用。今天我们要说的是如何使用 Polylang 插件来实现主题选项中字段的翻译。

    WordPress多语言插件WPML在Polylang之前就已经创建了,因此对于一些插件和主题集成很好。WPML语言配置文件 wpml-config.xml已经可以翻译主题选项中的字段,Polylang 也支持 wpml-config.xml 文件的配置,而且 Polylang 的工作效率几本可以完成很多主题或者插件的翻译工作,所以我们创建一个 wpml-config.xml,添加以下代码到文件中:

    <wpml-config>
        <custom-fields>
            <custom-field action="copy">quantity</custom-field>
            <custom-field action="translate">custom-title</custom-field>
        </custom-fields>
        <custom-types>
            <custom-type translate="1">book</custom-type>
            <custom-type translate="1">DVD</custom-type>
        </custom-types>
        <taxonomies>
            <taxonomy translate="1">genre</taxonomy>
        </taxonomies>
        <admin-texts>
           <!--my_themes_options 为主题选项的全局变量名-->
            <key name="my_themes_options">
               <!--其中其它名称则是选项的 ID-->
                <key name="option_name_1" />
                <key name="option_name_2" />
                <key name="options_group_1">
                    <key name="sub_option_name_11" />
                    <key name="sub_option_name_12" />
                </key>
            </key>
            <key name="simple_string_option" />
        </admin-texts>
    </wpml-config>

    将wpml-config.xml文件放在主题或者 Polylang 插件的根目录,再前台插件后台『语言——字符串翻译』中进行翻译即可,如下图:

  • WordPress DashBoard 仪表盘后台删除不需要的菜单 图文教程

    WordPress DashBoard 仪表盘后台删除不需要的菜单 图文教程

    我们在插件、主题开发时需要删除后台一些不需要的菜单功能。下面我们给出具体的代码段

    /**
     * Removes some menus by page.
     */
    function wpdocs_remove_menus(){
       
      remove_menu_page( 'index.php' );                  //Dashboard
      remove_menu_page( 'jetpack' );                    //Jetpack* 
      remove_menu_page( 'edit.php' );                   //Posts
      remove_menu_page( 'upload.php' );                 //Media
      remove_menu_page( 'edit.php?post_type=page' );    //Pages
      remove_menu_page( 'edit-comments.php' );          //Comments
      remove_menu_page( 'themes.php' );                 //Appearance
      remove_menu_page( 'plugins.php' );                //Plugins
      remove_menu_page( 'users.php' );                  //Users
      remove_menu_page( 'tools.php' );                  //Tools
      remove_menu_page( 'options-general.php' );        //Settings
       
    }
    add_action( 'admin_menu', 'wpdocs_remove_menus' );
    ?>

    官方文档:https://developer.wordpress.org/reference/functions/remove_menu_page/

WeChat
↑