markdown 覆盖模板 - Divi Staff WordPress插件

Posted 2021-05-05

# How to override templates for Divi Staff WordPress plugin 

### Use case

This code snippet is useful to change the layout and structure of the Divi Staff custom post type. Specifically, it allows you to customize the HTML output and PHP output of the [Divi Staff plugin by Monterey Premier](https://www.montereypremier.com/product/divi-staff/). It will help you override the plugin templates by using your theme (or child theme) templates. 

This code is also useful to override the Divi Staff Filterable Grid module in the Divi Builder.

### References

I couldn't find docs or info on the web for this code. I did receive much help from the plugin's email support, which I found under FAQ's, after I logged in as the purchaser. 

## What templates to override?

Divi Staff has 3 templates, similar to any custom post type in WordPress: 

- staff single (i.e. the post)
- staff taxonomy (i.e. the category)
- staff archive (i.e. the listing)

## How to override the templates?

Here's how to override the plugin's templates with your own templates:

1. Copy the plugin's `templates` folder, and drop into your theme. For example, copy `/plugins/divi-staff/templates/` and drop into `/themes/active_theme/templates/`.
2. Copy lines 63-75 from `/divi-staff.php` file, and paste into your theme's `functions.php` file. The lines may change in upcoming versions, but it will be 3 filters starting with `add_filter('template_include'`; 

**Note:** Be sure to update each filter name with your theme prefix. For example, change `single_staff_template` to ` jennywrenchildtheme_single_staff_template`.

## How to override Divi Staff Filterable Grid module?

To make customizations to the Divi Builder module "Divi Staff Filterable Grid", override it this way:

1. Copy `/includes/dspt-dpbm.php` file from the Divi Staff plugin, and drop the code into your theme's `functions.php` file (or include as separate file).

//* Override Divi Staff plugin templates
// @link /plugins/divi-staff.php
// Note: the plugin_dir_path(FILE) does go to the theme file

add_filter('template_include', 'jennywren_single_staff_template');
function jennywren_single_staff_template( $template ) {
    if( is_singular('staff') ) {
        $theme_files = array();
        $exists_in_theme = locate_template($theme_files, false);
        if( $exists_in_theme != '' ) {
             return $exists_in_theme;
        } else {
            return plugin_dir_path(FILE) . 'templates/single-staff.php';
        }
    }
    return $template;
}

add_filter('template_include', 'jennywren_staff_template');
function jennywren_staff_template( $template ) {
    if( is_post_type_archive('staff') ) {
        $theme_files = array();
        $exists_in_theme = locate_template($theme_files, false);
        if( $exists_in_theme != '' ) {
            return $exists_in_theme;
        } else {
        return plugin_dir_path(FILE) . 'templates/archive-staff.php';
        }
    }
    return $template;
}

add_filter('template_include', 'jennywren_department_template');
function jennywren_department_template( $template ) {
    if( is_tax('departments') ) {
        $theme_files = array();
        $exists_in_theme = locate_template($theme_files, false);
        if( $exists_in_theme != '' ) {
            return $exists_in_theme;
        } else {
            return plugin_dir_path(FILE) . 'templates/taxonomy-departments.php';
        }
    }
    return $template;
}

/* Plugin - Divi Staff Directory (Listings pages, Individual posts, Archives)
-------------------------------------------------------------------------------- */

/* Remove custom bullets */

.entry-content ul li.et_pb_portfolio_filter::before,
.entry-content .et_pb_portofolio_pagination ul li::before {
	content: none;
}

/* Fix Pagination */

.et_pb_gallery .et_pb_gallery_pagination, 
.et_pb_portfolio_grid .et_pb_portofolio_pagination,
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
	border: none;
	clear: both;
}

/* Fix archives */

.archive .dspt-archive-department,
.archive .staff.hentry > p,
.archive .dspt-archive-read-more {
	display: none;
}

.archive a.dspt-staff-img img {
	float: none;
	width: 100%;
}

.archive .et_pb_post.staff {
	max-width: 240px;
}

/* Page Title */

.archive .dspt-archive-title h1 {
	color: #f57920 !important;
	font-size: 45px;
	font-weight: 800;
  letter-spacing: -0.025em;
	text-transform: uppercase;
}

/* Names */

.single h1.dspt-single-page-title {
  color: #f57920 !important;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.archive h2.dspt-archive-staff a {
	color: #f57920 !important;
  font-size: 18px;
	font-weight: 800;
	line-height: 1.1em;
	text-transform: uppercase;
}

.archive h2.dspt-archive-staff {
	margin: 10px 0 0;
	max-width: 240px;
	padding: 0 !important;
}

.et_pb_portfolio_grid h2,
.et_pb_filterable_portfolio h2 {
  color: #f57920 !important;
	font-size: 18px;
	line-height: 1.1em;
  margin-top: 8px;
	padding-bottom: 0;
}

.archive h2.dspt-archive-staff a:hover,
div.dspt-archive-staff a:hover,
h3.dspt-archive-department a:hover,
.dspt-department a:hover,
.et_pb_portfolio_grid h2 a:hover,
.et_pb_portfolio_items h2 a:hover {
	color: #ffae3b !important;
}

/* Horizontal lines */

hr.dspt-title-line, 
hr.dspt-single-title-line {
    border-top: none !important;
    color: transparent;
    margin: 5px 0 0;
}

/* Meta */

.single h2.dspt-position {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.single .dspt-meta {
	line-height: 1.9em;
}

.single i {
	color: #6e655d;
	opacity: 0.5;
	padding-right: 5px;
}

.single .dspt-meta a {
    color: #333333 !important;
}

.single .dspt-meta a:hover {
    color: #f57920 !important;
	border-bottom: 1px solid #f1d6c8;
}

.single .dspt-department {
	margin: 12px 0;
}

.single .dspt-department a {
    border: 1px solid #f1d6c8;
	display: inline-block;
	line-height: 1.4;
	margin-bottom: 5px;
	padding: 5px 16px;
}

.single .dspt-department a:hover {
    border-color: #f57920;
    background: #f57920;
    color: white !important;
}

.archive .dspt-archive-position,
.et_pb_portfolio_grid .ds-dpbm-position,
.et_pb_filterable_portfolio .ds-dpbm-position {
	color: #666666 !important;
	font-size: 16px;
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	line-height: 1.2em;
	margin: 4px 0 0 !important;
}

/* Photos / Headshots */

.single .dspt_left_area,
.single div.dspt-single-staff-img img {
    max-width: 240px;
    width: 100%;
}

.single .dspt_single_wrap {
    margin-bottom: 10px;
}

.archive a.dspt-staff-img:hover img {
    opacity: 0.7;
}
   
div.dspt-staff-img img,
div.dspt-single-staff-img img,
a.dspt-staff-img img,
a.dspt-single-staff-img img {
    border: none;
    padding: 0 !important;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 480px) {
	.archive .et_pb_post.staff {
	    float: left;
		margin-right: 5%;
		margin-bottom: 5%;
		width: 45%;
	}
}
@media (min-width: 768px) {
	.archive .et_pb_post.staff {
		width: 28.333%;
	}
}
@media (min-width: 981px) {
	.archive .et_pb_post.staff {
		width: 20%;
	}
}
@media (min-width: 480px) and (max-width: 767px) {
	.archive .et_pb_post.staff:nth-child(2n+2) {
		clear: both;
	}	
}
@media (min-width: 768px) and (max-width: 980px) {
	.archive .et_pb_post.staff:nth-child(3n+2) {
		clear: both;
	}	
}
@media (min-width: 981px) {
	.archive .et_pb_post.staff:nth-child(4n+2) {
		clear: both;
	}	
}

[ file under: Notes ]

## Divi Staff
*Change layout and structure of the Divi Staff custom post type*


Code in:
- Appearance > Editor > Templates
- Appearance > Editor > functions.php

Code Documentation:
- GitHub: https://gist.github.com/JennyWren/253c4ca69de57d85844d5c15c17c8671
- Cacher: https://snippets.cacher.io/snippet/0e23146350e1f1176903