Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.

Welcome to the bundled themes family!

Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.

Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.

Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.

git-svn-id: https://develop.svn.wordpress.org/trunk@49216 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2020-10-20 01:12:25 +00:00
parent 2a8dae456d
commit 4b90066592
63 changed files with 32788 additions and 0 deletions

1
.gitignore vendored
View File

@ -45,6 +45,7 @@ wp-tests-config.php
!/src/wp-content/themes/twentysixteen
!/src/wp-content/themes/twentyseventeen
!/src/wp-content/themes/twentynineteen
!/src/wp-content/themes/twentytwentyone
/src/wp-content/upgrade
/src/wp-content/uploads
/src/wp-content/advanced-cache.php

View File

@ -0,0 +1,27 @@
<?php
/**
* The template for displaying 404 pages (not found)
*
* @link https://codex.wordpress.org/Creating_an_Error_404_Page
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
?>
<header class="page-header alignwide">
<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
</header><!-- .page-header -->
<div class="error-404 not-found default-max-width">
<div class="page-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</div><!-- .error-404 -->
<?php
get_footer();

View File

@ -0,0 +1,32 @@
<?php
/**
* The template for displaying archive pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
?>
<?php if ( have_posts() ) : ?>
<header class="page-header alignwide">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' ); ?>
</header><!-- .page-header -->
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) ); ?>
<?php endwhile; ?>
<?php twenty_twenty_one_the_posts_navigation(); ?>
<?php else : ?>
<?php get_template_part( 'template-parts/content/content-none' ); ?>
<?php endif; ?>
<?php get_footer(); ?>

View File

@ -0,0 +1,5 @@
/**
* Custom Color Overrides
*
* This file is automatically populated if the user chooses custom colors in the Customzier.
*/

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,162 @@
/*
Adding print support. The print styles are based on the the great work of
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Margins
# Typography
# Page breaks
# Links
# Visibility
--------------------------------------------------------------*/
@media print {
/* Margins */
@page {
margin: 2cm;
}
.entry {
margin-top: 1em;
}
.entry .entry-header,
.site-footer .site-info {
margin: 0;
}
/* Fonts */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif);
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2,
h3,
h4,
.has-regular-font-size,
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title {
font-size: 14pt;
margin-top: 25px;
}
/* Page breaks */
a {
page-break-inside: avoid;
}
blockquote {
page-break-inside: avoid;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
table,
pre {
page-break-inside: avoid;
}
ul,
ol,
dl {
page-break-before: avoid;
}
/* Links */
a:link,
a:visited,
a {
background: transparent;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a[href^="http"]:after {
content: " < " attr(href) "> ";
}
a:after > img {
content: "";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
/* Visibility */
.primary-navigation,
.site-title + .primary-navigation,
.site-branding-container:before,
.entry .entry-title:before,
.entry-footer,
.author-description:before,
.post-navigation,
.widget-area,
.comment-form-flex,
.comment-reply,
.comment .comment-metadata .edit-link {
display: none;
}
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .button {
color: #000;
background: none;
}
/* Site Header (With Featured Image) */
.site-header.featured-image {
min-height: 0;
}
.site-header.featured-image .primary-navigation a,
.site-header.featured-image .primary-navigation a + svg,
.site-header.featured-image .site-title a,
.site-header.featured-image .site-featured-image a,
.site-header.featured-image .site-branding .site-title,
.site-header.featured-image .site-branding .site-description,
.site-header.featured-image .primary-navigation a:after,
.site-header.featured-image .primary-navigation .menu-wrapper > li.menu-item-has-children:after,
.site-header.featured-image .primary-navigation li,
.site-header.featured-image .entry-title,
.site-header.featured-image#masthead .site-title a {
color: #000;
text-shadow: none;
}
.site-header.featured-image .site-featured-image .entry-header,
.site-header.featured-image .site-branding-container {
margin-top: 0;
margin-bottom: 0;
}
.site-header.featured-image .site-featured-image .post-thumbnail img {
position: relative;
height: initial;
width: initial;
object-fit: none;
min-width: 0;
min-height: 0;
max-width: 100%;
margin-top: 1rem;
}
/* Remove image filters from featured image */
.image-filters-enabled *:after {
display: none !important;
}
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
display: none;
}
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
}
/*# sourceMappingURL=print.css.map */

View File

@ -0,0 +1,3 @@
/**
* These styles are generated by the Customizer and only loaded when a custom color scheme is active.
*/

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,67 @@
( function( api ) {
/**
* Get luminance from a HEX color.
*
* @param {string} hex - The hex color.
*
* @return {number} - Returns the luminance, number between 0 and 255.
*/
function twentytwentyoneGetHexLum( hex ) {
var rgb = twentytwentyoneGetRgbFromHex( hex );
return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
}
/**
* Get RGB from HEX.
*
* @param {string} hex - The hex color.
*
* @return {Object} - Returns an object {r, g, b}
*/
function twentytwentyoneGetRgbFromHex( hex ) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
result;
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
hex = hex.replace( shorthandRegex, function( m, r, g, b ) {
return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString();
} );
result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
return result ? {
r: parseInt( result[1], 16 ),
g: parseInt( result[2], 16 ),
b: parseInt( result[3], 16 )
} : null;
}
// Add listener for the "background_color" control.
api( 'background_color', function( value ) {
value.bind( function( to ) {
var lum = twentytwentyoneGetHexLum( to ),
isDark = 127 > lum,
textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)',
tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)';
// Modify the body class depending on whether this is a dark background or not.
if ( isDark ) {
if ( ! document.body.classList.contains( 'is-background-dark' ) ) {
document.body.classList.add( 'is-background-dark' );
}
} else {
document.body.classList.remove( 'is-background-dark' );
}
document.documentElement.style.setProperty( '--global--color-primary', textColor );
document.documentElement.style.setProperty( '--global--color-secondary', textColor );
document.documentElement.style.setProperty( '--global--color-background', to );
document.documentElement.style.setProperty( '--button--color-background', textColor );
document.documentElement.style.setProperty( '--button--color-text', to );
document.documentElement.style.setProperty( '--button--color-text-hover', textColor );
document.documentElement.style.setProperty( '--table--stripes-border-color', tableColor );
document.documentElement.style.setProperty( '--table--stripes-background-color', tableColor );
} );
} );
}( wp.customize, _ ) );

View File

@ -0,0 +1,53 @@
/**
* Script for our custom colorpicker control.
*
* This is copied from wp-admin/js/customize-controls.js
* with a few tweaks:
* Removed the hue picker script because we don't use it here
* Added the "palettes" argument in wpColorPicker().
*/
wp.customize.controlConstructor['twenty-twenty-one-color'] = wp.customize.Control.extend( {
ready: function() {
var control = this,
updating = false,
picker;
picker = this.container.find( '.color-picker-hex' );
picker.val( control.setting() ).wpColorPicker( {
palettes: control.params.palette,
change: function() {
updating = true;
control.setting.set( picker.wpColorPicker( 'color' ) );
updating = false;
},
clear: function() {
updating = true;
control.setting.set( '' );
updating = false;
}
} );
control.setting.bind( function( value ) {
// Bail if the update came from the control itself.
if ( updating ) {
return;
}
picker.val( value );
picker.wpColorPicker( 'color', value );
} );
// Collapse color picker when hitting Esc instead of collapsing the current section.
control.container.on( 'keydown', function( event ) {
var pickerContainer;
if ( 27 !== event.which ) { // Esc.
return;
}
pickerContainer = control.container.find( '.wp-picker-container' );
if ( pickerContainer.hasClass( 'wp-picker-active' ) ) {
picker.wpColorPicker( 'close' );
control.container.find( '.wp-color-result' ).focus();
event.stopPropagation(); // Prevent section from being collapsed.
}
} );
}
} );

View File

@ -0,0 +1,42 @@
/**
* File primary-navigation.js.
*
* Required to open and close the mobile navigation.
*/
/**
* Polyfill for Element.closest() because we need to support IE11.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
*/
if ( ! Element.prototype.matches ) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if ( ! Element.prototype.closest ) {
Element.prototype.closest = function( s ) {
var el = this;
do {
if ( Element.prototype.matches.call( el, s ) ) {
return el;
}
el = el.parentElement || el.parentNode;
} while ( el !== null && el.nodeType === 1 );
return null;
};
}
/**
* Polyfill for NodeList.foreach() because we need to support IE11.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
*/
if ( window.NodeList && ! NodeList.prototype.forEach ) {
NodeList.prototype.forEach = function( callback, thisArg ) {
var i;
thisArg = thisArg || window;
for ( i = 0; i < this.length; i++ ) {
callback.call( thisArg, this[i], i, this );
}
};
}

View File

@ -0,0 +1,146 @@
/**
* File primary-navigation.js.
*
* Required to open and close the mobile navigation.
*/
/**
* Toggle an attribute's value
*
* @param {Element} el - The element.
* @param {boolean} withListeners - Whether we want to add/remove listeners or not.
* @since 1.0.0
*/
function twentytwentyoneToggleAriaExpanded( el, withListeners ) {
if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
el.setAttribute( 'aria-expanded', 'true' );
if ( withListeners ) {
document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
}
} else {
el.setAttribute( 'aria-expanded', 'false' );
if ( withListeners ) {
document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
}
}
}
function twentytwentyoneCollapseMenuOnClickOutside( event ) {
if ( ! document.getElementById( 'site-navigation' ).contains( event.target ) ) {
document.getElementById( 'site-navigation' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
button.setAttribute( 'aria-expanded', 'false' );
} );
}
}
/**
* Handle clicks on submenu toggles.
*
* @param {Element} el - The element.
*/
function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
// Close submenu that was opened from a hover action.
// We'll return early in this case to avoid changing the aria-expanded attribute.
if ( el.parentNode.classList.contains( 'hover' ) ) {
el.parentNode.classList.remove( 'hover' );
return;
}
// Close other expanded items.
el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
if ( button !== el ) {
button.setAttribute( 'aria-expanded', 'false' );
}
} );
// Toggle aria-expanded on the button.
twentytwentyoneToggleAriaExpanded( el, true );
// On tab-away collapse the menu.
el.parentNode.querySelectorAll( 'ul > li:last-child > a' ).forEach( function( linkEl ) {
linkEl.addEventListener( 'blur', function( event ) {
if ( ! el.parentNode.contains( event.relatedTarget ) ) {
el.setAttribute( 'aria-expanded', 'false' );
}
} );
} );
}
( function() {
/**
* Menu Toggle Behaviors
*
* @param {string} id - The ID.
*/
var navMenu = function( id ) {
var wrapper = document.body, // this is the element to which a CSS class is added when a mobile nav menu is open
mobileButton = document.getElementById( id + '-mobile-menu' );
if ( mobileButton ) {
mobileButton.onclick = function() {
wrapper.classList.toggle( id + '-navigation-open' );
wrapper.classList.toggle( 'lock-scrolling' );
twentytwentyoneToggleAriaExpanded( mobileButton );
mobileButton.focus();
};
}
/**
* Trap keyboard navigation in the menu modal.
* Adapted from TwentyTwenty
*/
document.addEventListener( 'keydown', function( event ) {
var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
if ( ! wrapper.classList.contains( id + '-navigation-open' ) ) {
return;
}
modal = document.querySelector( '.' + id + '-navigation' );
selectors = 'input, a, button';
elements = modal.querySelectorAll( selectors );
elements = Array.prototype.slice.call( elements );
tabKey = event.keyCode === 9;
shiftKey = event.shiftKey;
escKey = event.keyCode === 27;
activeEl = document.activeElement;
lastEl = elements[ elements.length - 1 ];
firstEl = elements[0];
if ( escKey ) {
event.preventDefault();
wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
twentytwentyoneToggleAriaExpanded( mobileButton );
mobileButton.focus();
}
if ( ! shiftKey && tabKey && lastEl === activeEl ) {
event.preventDefault();
firstEl.focus();
}
if ( shiftKey && tabKey && firstEl === activeEl ) {
event.preventDefault();
lastEl.focus();
}
// If there are no elements in the menu, don't move the focus
if ( tabKey && firstEl === lastEl ) {
event.preventDefault();
}
} );
document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
li.addEventListener( 'mouseenter', function() {
if ( 'false' === this.querySelector( '.sub-menu-toggle' ).getAttribute( 'aria-expanded' ) ) {
this.classList.add( 'hover' );
}
} );
li.addEventListener( 'mouseleave', function() {
this.classList.remove( 'hover' );
} );
} );
};
window.addEventListener( 'load', function() {
new navMenu( 'primary' );
} );
}() );

View File

@ -0,0 +1,33 @@
/**
* File skip-link-focus-fix.js.
*
* Helps with accessibility for keyboard only users.
*
* This is the source file for what is minified in the twenty_twenty_one_skip_link_focus_fix() PHP function.
*
* Learn more: https://git.io/vWdr2
*/
( function() {
var isIe = /(trident|msie)/i.test( navigator.userAgent );
if ( isIe && document.getElementById && window.addEventListener ) {
window.addEventListener( 'hashchange', function() {
var id = location.hash.substring( 1 ),
element;
if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
return;
}
element = document.getElementById( id );
if ( element ) {
if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
element.tabIndex = -1;
}
element.focus();
}
}, false );
}
}() );

View File

@ -0,0 +1,6 @@
/**
* Unregister "Wide" Separator Style
*/
wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' );
} );

View File

@ -0,0 +1,180 @@
<?php
/**
* Custom Colors Class
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* This class is in charge of color customization via the Customizer.
*/
class Twenty_Twenty_One_Custom_Colors {
/**
* Instantiate the object.
*
* @access public
*
* @since 1.0.0
*/
public function __construct() {
// Enqueue color variables for customizer & frontend.
add_action( 'wp_enqueue_scripts', array( $this, 'custom_color_variables' ) );
// Enqueue color variables for editor.
add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) );
// Add body-class if needed.
add_filter( 'body_class', array( $this, 'body_class' ) );
}
/**
* Determine the luminance of the given color and then return #fff or #000 so that our text is always readable.
*
* @access public
*
* @param string $background_color The background color.
*
* @since 1.0.0
*
* @return string (hex color)
*/
public function custom_get_readable_color( $background_color ) {
return ( 127 < $this->get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
}
/**
* Generate color variables.
*
* Adjust the color value of the CSS variables depending on the background color theme mod.
* Both text and link colors needs to be updated.
* The code below needs to be updated, because the colors are no longer theme mods.
*
* @access public
*
* @since 1.0.0
*
* @param string|null $context Can be "editor" or null.
*
* @return string
*/
public function generate_custom_color_variables( $context = null ) {
$theme_css = 'editor' === $context ? ':root .editor-styles-wrapper{' : ':root{';
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
if ( 'd1e4dd' !== strtolower( $background_color ) ) {
$theme_css .= '--global--color-background: #' . $background_color . ';';
$theme_css .= '--global--color-primary: ' . $this->custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';';
$theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';';
if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {
$theme_css .= '--table--stripes-border-color: var(--global--color-dark-gray);';
$theme_css .= '--table--stripes-background-color: var(--global--color-dark-gray);';
}
}
$theme_css .= '}';
return $theme_css;
}
/**
* Customizer & frontend custom color variables.
*
* @access public
*
* @since 1.0.0
*
* @return void
*/
public function custom_color_variables() {
if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() );
}
}
/**
* Editor custom color variables.
*
* @access public
*
* @since 1.0.0
*
* @return void
*/
public function editor_custom_color_variables() {
wp_enqueue_style(
'twenty-twenty-one-custom-color-overrides',
get_theme_file_uri( 'assets/css/custom-color-overrides.css' ),
array(),
(string) filemtime( get_theme_file_path( 'assets/css/custom-color-overrides.css' ) )
);
if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
}
}
/**
* Get luminance from a HEX color.
*
* @access public
*
* @since 1.0.0
*
* @param string $hex The HEX color.
*
* @return int Returns a number (0-255).
*/
public function get_relative_luminance_from_hex( $hex ) {
// Remove the "#" symbol from the beginning of the color.
$hex = ltrim( $hex, '#' );
// Make sure we have 6 digits for the below calculations.
if ( 3 === strlen( $hex ) ) {
$hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
}
// Get red, green, blue.
$red = hexdec( substr( $hex, 0, 2 ) );
$green = hexdec( substr( $hex, 2, 2 ) );
$blue = hexdec( substr( $hex, 4, 2 ) );
// Calculate the luminance.
$lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue );
return (int) round( $lum );
}
/**
* Adds a class to <body> if the background-color is dark.
*
* @access public
*
* @since 1.0.0
*
* @param array $classes The existing body classes.
*
* @return array
*/
public function body_class( $classes ) {
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
if ( 127 > $this->get_relative_luminance_from_hex( $background_color ) ) {
$classes[] = 'is-background-dark';
} else {
$classes[] = 'is-background-light';
}
$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
$classes[] = 'has-default-light-palette-background';
}
return $classes;
}
}

View File

@ -0,0 +1,75 @@
<?php
/**
* Customize API: WP_Customize_Color_Control class
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Customize Color Control class.
*
* @since 1.0.0
*
* @see WP_Customize_Control
*/
class Twenty_Twenty_One_Customize_Color_Control extends WP_Customize_Color_Control {
/**
* The control type.
*
* @since 1.0.0
*
* @var string
*/
public $type = 'twenty-twenty-one-color';
/**
* Colorpicker palette
*
* @access public
*
* @since 1.0.0
*
* @var array
*/
public $palette;
/**
* Enqueue control related scripts/styles.
*
* @access public
*
* @since 1.0.0
*
* @return void
*/
public function enqueue() {
parent::enqueue();
// Enqueue the script.
wp_enqueue_script(
'twentytwentyone-control-color',
get_theme_file_uri( 'assets/js/palette-colorpicker.js' ),
array( 'customize-controls', 'jquery', 'customize-base', 'wp-color-picker' ),
(string) filemtime( get_theme_file_path( 'assets/js/palette-colorpicker.js' ) ),
false
);
}
/**
* Refresh the parameters passed to the JavaScript via JSON.
*
* @access public
*
* @since 1.0.0
*
* @uses WP_Customize_Control::to_json()
*
* @return void
*/
public function to_json() {
parent::to_json();
$this->json['palette'] = $this->palette;
}
}

View File

@ -0,0 +1,192 @@
<?php
/**
* Customizer settings for this theme.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
/**
* Customizer Settings.
*
* @since 1.0.0
*/
class Twenty_Twenty_One_Customize {
/**
* Constructor. Instantiate the object.
*
* @access public
*
* @since 1.0.0
*/
public function __construct() {
add_action( 'customize_register', array( $this, 'register' ) );
}
/**
* Register customizer options.
*
* @access public
*
* @since 1.0.0
*
* @param WP_Customize_Manager $wp_customize Theme Customizer object.
*
* @return void
*/
public function register( $wp_customize ) {
// Change site-title & description to postMessage.
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
// Add partial for blogname.
$wp_customize->selective_refresh->add_partial(
'blogname',
array(
'selector' => '.site-title',
'render_callback' => array( $this, 'partial_blogname' ),
)
);
// Add partial for blogdescription.
$wp_customize->selective_refresh->add_partial(
'blogdescription',
array(
'selector' => '.site-description',
'render_callback' => array( $this, 'partial_blogdescription' ),
)
);
// Add "display_title_and_tagline" setting for displaying the site-title & tagline.
$wp_customize->add_setting(
'display_title_and_tagline',
array(
'capability' => 'edit_theme_options',
'default' => true,
'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
)
);
// Add control for the "display_title_and_tagline" setting.
$wp_customize->add_control(
'display_title_and_tagline',
array(
'type' => 'checkbox',
'section' => 'title_tagline',
'label' => esc_html__( 'Display Site Title & Tagline', 'twentytwentyone' ),
)
);
/**
* Add excerpt or full text selector to customizer
*/
$wp_customize->add_section(
'excerpt_settings',
array(
'title' => esc_html__( 'Excerpt Settings', 'twentytwentyone' ),
'priority' => 120,
)
);
$wp_customize->add_setting(
'display_excerpt_or_full_post',
array(
'capability' => 'edit_theme_options',
'default' => 'excerpt',
'sanitize_callback' => function( $value ) {
return 'excerpt' === $value || 'full' === $value ? $value : 'excerpt';
},
)
);
$wp_customize->add_control(
'display_excerpt_or_full_post',
array(
'type' => 'radio',
'section' => 'excerpt_settings',
'label' => esc_html__( 'On archive pages, posts show:', 'twentytwentyone' ),
'choices' => array(
'excerpt' => esc_html__( 'Summary', 'twentytwentyone' ),
'full' => esc_html__( 'Full text', 'twentytwentyone' ),
),
)
);
// Background color.
// Include the custom control class.
include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-color-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
// Register the custom control.
$wp_customize->register_control_type( 'Twenty_Twenty_One_Customize_Color_Control' );
// Get the palette from theme-supports.
$palette = get_theme_support( 'editor-color-palette' );
// Build the colors array from our theme-support.
$colors = array();
if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
foreach ( $palette[0] as $palette_color ) {
$colors[] = $palette_color['color'];
}
}
// Add the control. Overrides the default background-color control.
$wp_customize->add_control(
new Twenty_Twenty_One_Customize_Color_Control(
$wp_customize,
'background_color',
array(
'label' => esc_html__( 'Background Control', 'twentytwentyone' ),
'section' => 'colors',
'palette' => $colors,
)
)
);
}
/**
* Sanitize boolean for checkbox.
*
* @access public
*
* @since 1.0.0
*
* @param bool $checked Whether or not a box is checked.
*
* @return bool
*/
public static function sanitize_checkbox( $checked = null ) {
return (bool) isset( $checked ) && true === $checked;
}
/**
* Render the site title for the selective refresh partial.
*
* @access public
*
* @since 1.0.0
*
* @return void
*/
public function partial_blogname() {
bloginfo( 'name' );
}
/**
* Render the site tagline for the selective refresh partial.
*
* @access public
*
* @since 1.0.0
*
* @return void
*/
public function partial_blogdescription() {
bloginfo( 'description' );
}
}
}

View File

@ -0,0 +1,250 @@
<?php
/**
* SVG Icons class
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* This class is in charge of displaying SVG icons across the site.
*
* Place each <svg> source on its own array key, without adding either
* the `width` or `height` attributes, since these are added dynamically,
* before rendering the SVG code.
*
* All icons are assumed to have equal width and height, hence the option
* to only specify a `$size` parameter in the svg methods.
*
* @since 1.0.0
*/
class Twenty_Twenty_One_SVG_Icons {
/**
* User Interface icons svg sources.
*
* @access protected
*
* @since 1.0.0
*
* @var array
*/
protected static $icons = array(
'arrow_right' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m4 13v-2h12l-4-4 1-2 7 7-7 7-1-2 4-4z" fill="currentColor"/></svg>',
'arrow_left' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 13v-2H8l4-4-1-2-7 7 7 7 1-2-4-4z" fill="currentColor"/></svg>',
'close' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.9394L5.53033 4.46973L4.46967 5.53039L10.9393 12.0001L4.46967 18.4697L5.53033 19.5304L12 13.0607L18.4697 19.5304L19.5303 18.4697L13.0607 12.0001L19.5303 5.53039L18.4697 4.46973L12 10.9394Z" fill="currentColor"/></svg>',
'menu' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 6H19.5V7.5H4.5V6ZM4.5 12H19.5V13.5H4.5V12ZM19.5 18H4.5V19.5H19.5V18Z" fill="currentColor"/></svg>',
'plus' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"/></svg>',
'minus' => '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"/></svg>',
);
/**
* Social Icons svg sources.
*
* @access protected
*
* @since 1.0.0
*
* @var array
*/
protected static $social_icons = array(
'500px' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M6.94026,15.1412c.00437.01213.108.29862.168.44064a6.55008,6.55008,0,1,0,6.03191-9.09557,6.68654,6.68654,0,0,0-2.58357.51467A8.53914,8.53914,0,0,0,8.21268,8.61344L8.209,8.61725V3.22948l9.0504-.00008c.32934-.0036.32934-.46353.32934-.61466s0-.61091-.33035-.61467L7.47248,2a.43.43,0,0,0-.43131.42692v7.58355c0,.24466.30476.42131.58793.4819.553.11812.68074-.05864.81617-.2457l.018-.02481A10.52673,10.52673,0,0,1,9.32258,9.258a5.35268,5.35268,0,1,1,7.58985,7.54976,5.417,5.417,0,0,1-3.80867,1.56365,5.17483,5.17483,0,0,1-2.69822-.74478l.00342-4.61111a2.79372,2.79372,0,0,1,.71372-1.78792,2.61611,2.61611,0,0,1,1.98282-.89477,2.75683,2.75683,0,0,1,1.95525.79477,2.66867,2.66867,0,0,1,.79656,1.909,2.724,2.724,0,0,1-2.75849,2.748,4.94651,4.94651,0,0,1-.86254-.13719c-.31234-.093-.44519.34058-.48892.48349-.16811.54966.08453.65862.13687.67489a3.75751,3.75751,0,0,0,1.25234.18375,3.94634,3.94634,0,1,0-2.82444-6.742,3.67478,3.67478,0,0,0-1.13028,2.584l-.00041.02323c-.0035.11667-.00579,2.881-.00644,3.78811l-.00407-.00451a6.18521,6.18521,0,0,1-1.0851-1.86092c-.10544-.27856-.34358-.22925-.66857-.12917-.14192.04372-.57386.17677-.47833.489Zm4.65165-1.08338a.51346.51346,0,0,0,.19513.31818l.02276.022a.52945.52945,0,0,0,.3517.18416.24242.24242,0,0,0,.16577-.0611c.05473-.05082.67382-.67812.73287-.738l.69041.68819a.28978.28978,0,0,0,.21437.11032.53239.53239,0,0,0,.35708-.19486c.29792-.30419.14885-.46821.07676-.54751l-.69954-.69975.72952-.73469c.16-.17311.01874-.35708-.12218-.498-.20461-.20461-.402-.25742-.52855-.14083l-.7254.72665-.73354-.73375a.20128.20128,0,0,0-.14179-.05695.54135.54135,0,0,0-.34379.19648c-.22561.22555-.274.38149-.15656.5059l.73374.7315-.72942.73072A.26589.26589,0,0,0,11.59191,14.05782Zm1.59866-9.915A8.86081,8.86081,0,0,0,9.854,4.776a.26169.26169,0,0,0-.16938.22759.92978.92978,0,0,0,.08619.42094c.05682.14524.20779.531.50006.41955a8.40969,8.40969,0,0,1,2.91968-.55484,7.87875,7.87875,0,0,1,3.086.62286,8.61817,8.61817,0,0,1,2.30562,1.49315.2781.2781,0,0,0,.18318.07586c.15529,0,.30425-.15253.43167-.29551.21268-.23861.35873-.4369.1492-.63538a8.50425,8.50425,0,0,0-2.62312-1.694A9.0177,9.0177,0,0,0,13.19058,4.14283ZM19.50945,18.6236h0a.93171.93171,0,0,0-.36642-.25406.26589.26589,0,0,0-.27613.06613l-.06943.06929A7.90606,7.90606,0,0,1,7.60639,18.505a7.57284,7.57284,0,0,1-1.696-2.51537,8.58715,8.58715,0,0,1-.5147-1.77754l-.00871-.04864c-.04939-.25873-.28755-.27684-.62981-.22448-.14234.02178-.5755.088-.53426.39969l.001.00712a9.08807,9.08807,0,0,0,15.406,4.99094c.00193-.00192.04753-.04718.0725-.07436C19.79425,19.16234,19.87422,18.98728,19.50945,18.6236Z"></path></svg>',
'amazon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M13.582,8.182C11.934,8.367,9.78,8.49,8.238,9.166c-1.781,0.769-3.03,2.337-3.03,4.644 c0,2.953,1.86,4.429,4.253,4.429c2.02,0,3.125-0.477,4.685-2.065c0.516,0.747,0.685,1.109,1.629,1.894 c0.212,0.114,0.483,0.103,0.672-0.066l0.006,0.006c0.567-0.505,1.599-1.401,2.18-1.888c0.231-0.188,0.19-0.496,0.009-0.754 c-0.52-0.718-1.072-1.303-1.072-2.634V8.305c0-1.876,0.133-3.599-1.249-4.891C15.23,2.369,13.422,2,12.04,2 C9.336,2,6.318,3.01,5.686,6.351C5.618,6.706,5.877,6.893,6.109,6.945l2.754,0.298C9.121,7.23,9.308,6.977,9.357,6.72 c0.236-1.151,1.2-1.706,2.284-1.706c0.584,0,1.249,0.215,1.595,0.738c0.398,0.584,0.346,1.384,0.346,2.061V8.182z M13.049,14.088 c-0.451,0.8-1.169,1.291-1.967,1.291c-1.09,0-1.728-0.83-1.728-2.061c0-2.42,2.171-2.86,4.227-2.86v0.615 C13.582,12.181,13.608,13.104,13.049,14.088z M20.683,19.339C18.329,21.076,14.917,22,11.979,22c-4.118,0-7.826-1.522-10.632-4.057 c-0.22-0.199-0.024-0.471,0.241-0.317c3.027,1.762,6.771,2.823,10.639,2.823c2.608,0,5.476-0.541,8.115-1.66 C20.739,18.62,21.072,19.051,20.683,19.339z M21.336,21.043c-0.194,0.163-0.379,0.076-0.293-0.139 c0.284-0.71,0.92-2.298,0.619-2.684c-0.301-0.386-1.99-0.183-2.749-0.092c-0.23,0.027-0.266-0.173-0.059-0.319 c1.348-0.946,3.555-0.673,3.811-0.356C22.925,17.773,22.599,19.986,21.336,21.043z"></path></svg>',
'bandcamp' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M15.27 17.289 3 17.289 8.73 6.711 21 6.711 15.27 17.289"></path></svg>',
'behance' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>',
'codepen' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.016,8.84c-0.002-0.013-0.005-0.025-0.007-0.037c-0.005-0.025-0.008-0.048-0.015-0.072 c-0.003-0.015-0.01-0.028-0.013-0.042c-0.008-0.02-0.015-0.04-0.023-0.062c-0.007-0.015-0.013-0.028-0.02-0.042 c-0.008-0.02-0.018-0.037-0.03-0.057c-0.007-0.013-0.017-0.027-0.025-0.038c-0.012-0.018-0.023-0.035-0.035-0.052 c-0.01-0.013-0.02-0.025-0.03-0.037c-0.015-0.017-0.028-0.032-0.043-0.045c-0.01-0.012-0.022-0.023-0.035-0.035 c-0.015-0.015-0.032-0.028-0.048-0.04c-0.012-0.01-0.025-0.02-0.037-0.03c-0.005-0.003-0.01-0.008-0.015-0.012l-9.161-6.096 c-0.289-0.192-0.666-0.192-0.955,0L2.359,8.237C2.354,8.24,2.349,8.245,2.344,8.249L2.306,8.277 c-0.017,0.013-0.033,0.027-0.048,0.04C2.246,8.331,2.234,8.342,2.222,8.352c-0.015,0.015-0.028,0.03-0.042,0.047 c-0.012,0.013-0.022,0.023-0.03,0.037C2.139,8.453,2.125,8.471,2.115,8.488C2.107,8.501,2.099,8.514,2.09,8.526 C2.079,8.548,2.069,8.565,2.06,8.585C2.054,8.6,2.047,8.613,2.04,8.626C2.032,8.648,2.025,8.67,2.019,8.69 c-0.005,0.013-0.01,0.027-0.013,0.042C1.999,8.755,1.995,8.778,1.99,8.803C1.989,8.817,1.985,8.828,1.984,8.84 C1.978,8.879,1.975,8.915,1.975,8.954v6.093c0,0.037,0.003,0.075,0.008,0.112c0.002,0.012,0.005,0.025,0.007,0.038 c0.005,0.023,0.008,0.047,0.015,0.072c0.003,0.015,0.008,0.028,0.013,0.04c0.007,0.022,0.013,0.042,0.022,0.063 c0.007,0.015,0.013,0.028,0.02,0.04c0.008,0.02,0.018,0.038,0.03,0.058c0.007,0.013,0.015,0.027,0.025,0.038 c0.012,0.018,0.023,0.035,0.035,0.052c0.01,0.013,0.02,0.025,0.03,0.037c0.013,0.015,0.028,0.032,0.042,0.045 c0.012,0.012,0.023,0.023,0.035,0.035c0.015,0.013,0.032,0.028,0.048,0.04l0.038,0.03c0.005,0.003,0.01,0.007,0.013,0.01 l9.163,6.095C11.668,21.953,11.833,22,12,22c0.167,0,0.332-0.047,0.478-0.144l9.163-6.095l0.015-0.01 c0.013-0.01,0.027-0.02,0.037-0.03c0.018-0.013,0.035-0.028,0.048-0.04c0.013-0.012,0.025-0.023,0.035-0.035 c0.017-0.015,0.03-0.032,0.043-0.045c0.01-0.013,0.02-0.025,0.03-0.037c0.013-0.018,0.025-0.035,0.035-0.052 c0.008-0.013,0.018-0.027,0.025-0.038c0.012-0.02,0.022-0.038,0.03-0.058c0.007-0.013,0.013-0.027,0.02-0.04 c0.008-0.022,0.015-0.042,0.023-0.063c0.003-0.013,0.01-0.027,0.013-0.04c0.007-0.025,0.01-0.048,0.015-0.072 c0.002-0.013,0.005-0.027,0.007-0.037c0.003-0.042,0.007-0.079,0.007-0.117V8.954C22.025,8.915,22.022,8.879,22.016,8.84z M12.862,4.464l6.751,4.49l-3.016,2.013l-3.735-2.492V4.464z M11.138,4.464v4.009l-3.735,2.494L4.389,8.954L11.138,4.464z M3.699,10.562L5.853,12l-2.155,1.438V10.562z M11.138,19.536l-6.749-4.491l3.015-2.011l3.735,2.492V19.536z M12,14.035L8.953,12 L12,9.966L15.047,12L12,14.035z M12.862,19.536v-4.009l3.735-2.492l3.016,2.011L12.862,19.536z M20.303,13.438L18.147,12 l2.156-1.438L20.303,13.438z"></path></svg>',
'deviantart' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z"></path></svg>',
'dribbble' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z"></path></svg>',
'dropbox' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,6.134L6.069,9.797L2,6.54l5.883-3.843L12,6.134z M2,13.054l5.883,3.843L12,13.459L6.069,9.797L2,13.054z M12,13.459 l4.116,3.439L22,13.054l-4.069-3.257L12,13.459z M22,6.54l-5.884-3.843L12,6.134l5.931,3.663L22,6.54z M12.011,14.2l-4.129,3.426 l-1.767-1.153v1.291l5.896,3.539l5.897-3.539v-1.291l-1.769,1.153L12.011,14.2z"></path></svg>',
'etsy' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M9.16033,4.038c0-.27174.02717-.43478.48913-.43478h6.22283c1.087,0,1.68478.92391,2.11957,2.663l.35326,1.38587h1.05978C19.59511,3.712,19.75815,2,19.75815,2s-2.663.29891-4.23913.29891h-7.962L3.29076,2.163v1.1413L4.731,3.57609c1.00543.19022,1.25.40761,1.33152,1.33152,0,0,.08152,2.71739.08152,7.20109s-.08152,7.17391-.08152,7.17391c0,.81522-.32609,1.11413-1.33152,1.30435l-1.44022.27174V22l4.2663-.13587h7.11957c1.60326,0,5.32609.13587,5.32609.13587.08152-.97826.625-5.40761.70652-5.89674H19.7038L18.644,18.52174c-.84239,1.90217-2.06522,2.038-3.42391,2.038H11.1712c-1.3587,0-2.01087-.54348-2.01087-1.712V12.65217s3.0163,0,3.99457.08152c.76087.05435,1.22283.27174,1.46739,1.33152l.32609,1.413h1.16848l-.08152-3.55978.163-3.587H15.02989l-.38043,1.57609c-.24457,1.03261-.40761,1.22283-1.46739,1.33152-1.38587.13587-4.02174.1087-4.02174.1087Z"></path></svg>',
'facebook' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg>',
'feed' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z"></path></svg>',
'flickr' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M6.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5S9.25,7,6.5,7z M17.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5 S20.25,7,17.5,7z"></path></svg>',
'foursquare' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M17.573,2c0,0-9.197,0-10.668,0S5,3.107,5,3.805s0,16.948,0,16.948c0,0.785,0.422,1.077,0.66,1.172 c0.238,0.097,0.892,0.177,1.285-0.275c0,0,5.035-5.843,5.122-5.93c0.132-0.132,0.132-0.132,0.262-0.132h3.26 c1.368,0,1.588-0.977,1.732-1.552c0.078-0.318,0.692-3.428,1.225-6.122l0.675-3.368C19.56,2.893,19.14,2,17.573,2z M16.495,7.22 c-0.053,0.252-0.372,0.518-0.665,0.518c-0.293,0-4.157,0-4.157,0c-0.467,0-0.802,0.318-0.802,0.787v0.508 c0,0.467,0.337,0.798,0.805,0.798c0,0,3.197,0,3.528,0s0.655,0.362,0.583,0.715c-0.072,0.353-0.407,2.102-0.448,2.295 c-0.04,0.193-0.262,0.523-0.655,0.523c-0.33,0-2.88,0-2.88,0c-0.523,0-0.683,0.068-1.033,0.503 c-0.35,0.437-3.505,4.223-3.505,4.223c-0.032,0.035-0.063,0.027-0.063-0.015V4.852c0-0.298,0.26-0.648,0.648-0.648 c0,0,8.228,0,8.562,0c0.315,0,0.61,0.297,0.528,0.683L16.495,7.22z"></path></svg>',
'goodreads' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M17.3,17.5c-0.2,0.8-0.5,1.4-1,1.9c-0.4,0.5-1,0.9-1.7,1.2C13.9,20.9,13.1,21,12,21c-0.6,0-1.3-0.1-1.9-0.2 c-0.6-0.1-1.1-0.4-1.6-0.7c-0.5-0.3-0.9-0.7-1.2-1.2c-0.3-0.5-0.5-1.1-0.5-1.7h1.5c0.1,0.5,0.2,0.9,0.5,1.2 c0.2,0.3,0.5,0.6,0.9,0.8c0.3,0.2,0.7,0.3,1.1,0.4c0.4,0.1,0.8,0.1,1.2,0.1c1.4,0,2.5-0.4,3.1-1.2c0.6-0.8,1-2,1-3.5v-1.7h0 c-0.4,0.8-0.9,1.4-1.6,1.9c-0.7,0.5-1.5,0.7-2.4,0.7c-1,0-1.9-0.2-2.6-0.5C8.7,15,8.1,14.5,7.7,14c-0.5-0.6-0.8-1.3-1-2.1 c-0.2-0.8-0.3-1.6-0.3-2.5c0-0.9,0.1-1.7,0.4-2.5c0.3-0.8,0.6-1.5,1.1-2c0.5-0.6,1.1-1,1.8-1.4C10.3,3.2,11.1,3,12,3 c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1.1,0.5c0.3,0.2,0.6,0.5,0.9,0.8c0.3,0.3,0.5,0.6,0.6,1h0V3.4h1.5V15 C17.6,15.9,17.5,16.7,17.3,17.5z M13.8,14.1c0.5-0.3,0.9-0.7,1.3-1.1c0.3-0.5,0.6-1,0.8-1.6c0.2-0.6,0.3-1.2,0.3-1.9 c0-0.6-0.1-1.2-0.2-1.9c-0.1-0.6-0.4-1.2-0.7-1.7c-0.3-0.5-0.7-0.9-1.3-1.2c-0.5-0.3-1.1-0.5-1.9-0.5s-1.4,0.2-1.9,0.5 c-0.5,0.3-1,0.7-1.3,1.2C8.5,6.4,8.3,7,8.1,7.6C8,8.2,7.9,8.9,7.9,9.5c0,0.6,0.1,1.3,0.2,1.9C8.3,12,8.6,12.5,8.9,13 c0.3,0.5,0.8,0.8,1.3,1.1c0.5,0.3,1.1,0.4,1.9,0.4C12.7,14.5,13.3,14.4,13.8,14.1z"></path></svg>',
'google' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path></svg>',
'github' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg>',
'instagram' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg>',
'lastfm' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M10.5002,0 C4.7006,0 0,4.70109753 0,10.4998496 C0,16.2989526 4.7006,21 10.5002,21 C16.299,21 21,16.2989526 21,10.4998496 C21,4.70109753 16.299,0 10.5002,0 Z M14.69735,14.7204413 C13.3164,14.7151781 12.4346,14.0870017 11.83445,12.6859357 L11.6816001,12.3451305 L10.35405,9.31011397 C9.92709997,8.26875064 8.85260001,7.57120012 7.68010001,7.57120012 C6.06945001,7.57120012 4.75925001,8.88509738 4.75925001,10.5009524 C4.75925001,12.1164565 6.06945001,13.4303036 7.68010001,13.4303036 C8.77200001,13.4303036 9.76514999,12.827541 10.2719501,11.8567047 C10.2893,11.8235214 10.3239,11.8019673 10.36305,11.8038219 C10.4007,11.8053759 10.43535,11.8287847 10.4504,11.8631709 L10.98655,13.1045863 C11.0016,13.1389726 10.9956,13.17782 10.97225,13.2068931 C10.1605001,14.1995341 8.96020001,14.7683115 7.68010001,14.7683115 C5.33305,14.7683115 3.42340001,12.8535563 3.42340001,10.5009524 C3.42340001,8.14679459 5.33300001,6.23203946 7.68010001,6.23203946 C9.45720002,6.23203946 10.8909,7.19074535 11.6138,8.86359341 C11.6205501,8.88018505 12.3412,10.5707777 12.97445,12.0190621 C13.34865,12.8739575 13.64615,13.3959676 14.6288,13.4291508 C15.5663001,13.4612814 16.25375,12.9121534 16.25375,12.1484869 C16.25375,11.4691321 15.8320501,11.3003585 14.8803,10.98216 C13.2365,10.4397989 12.34495,9.88605929 12.34495,8.51817658 C12.34495,7.1809207 13.26665,6.31615054 14.692,6.31615054 C15.62875,6.31615054 16.3155,6.7286858 16.79215,7.5768142 C16.80495,7.60062396 16.8079001,7.62814302 16.8004001,7.65420843 C16.7929,7.68027384 16.7748,7.70212868 16.7507001,7.713808 L15.86145,8.16900031 C15.8178001,8.19200805 15.7643,8.17807308 15.73565,8.13847371 C15.43295,7.71345711 15.0956,7.52513451 14.6423,7.52513451 C14.05125,7.52513451 13.6220001,7.92899802 13.6220001,8.48649708 C13.6220001,9.17382194 14.1529001,9.34144259 15.0339,9.61923972 C15.14915,9.65578139 15.26955,9.69397731 15.39385,9.73432853 C16.7763,10.1865133 17.57675,10.7311301 17.57675,12.1836251 C17.57685,13.629654 16.3389,14.7204413 14.69735,14.7204413 Z"></path></svg>',
'linkedin' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg>',
'mail' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20,4H4C2.895,4,2,4.895,2,6v12c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V6C22,4.895,21.105,4,20,4z M20,8.236l-8,4.882 L4,8.236V6h16V8.236z"></path></svg>',
'mastodon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/></svg>',
'medium' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z"></path></svg>',
'meetup' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M19.24775,14.722a3.57032,3.57032,0,0,1-2.94457,3.52073,3.61886,3.61886,0,0,1-.64652.05634c-.07314-.0008-.10187.02846-.12507.09547A2.38881,2.38881,0,0,1,13.49453,20.094a2.33092,2.33092,0,0,1-1.827-.50716.13635.13635,0,0,0-.19878-.00408,3.191,3.191,0,0,1-2.104.60248,3.26309,3.26309,0,0,1-3.00324-2.71993,2.19076,2.19076,0,0,1-.03512-.30865c-.00156-.08579-.03413-.1189-.11608-.13493a2.86421,2.86421,0,0,1-1.23189-.56111,2.945,2.945,0,0,1-1.166-2.05749,2.97484,2.97484,0,0,1,.87524-2.50774.112.112,0,0,0,.02091-.16107,2.7213,2.7213,0,0,1-.36648-1.48A2.81256,2.81256,0,0,1,6.57673,7.58838a.35764.35764,0,0,0,.28869-.22819,4.2208,4.2208,0,0,1,6.02892-1.90111.25161.25161,0,0,0,.22023.0243,3.65608,3.65608,0,0,1,3.76031.90678A3.57244,3.57244,0,0,1,17.95918,8.626a2.97339,2.97339,0,0,1,.01829.57356.10637.10637,0,0,0,.0853.12792,1.97669,1.97669,0,0,1,1.27939,1.33733,2.00266,2.00266,0,0,1-.57112,2.12652c-.05284.05166-.04168.08328-.01173.13489A3.51189,3.51189,0,0,1,19.24775,14.722Zm-6.35959-.27836a1.6984,1.6984,0,0,0,1.14556,1.61113,3.82039,3.82039,0,0,0,1.036.17935,1.46888,1.46888,0,0,0,.73509-.12255.44082.44082,0,0,0,.26057-.44274.45312.45312,0,0,0-.29211-.43375.97191.97191,0,0,0-.20678-.063c-.21326-.03806-.42754-.0701-.63973-.11215a.54787.54787,0,0,1-.50172-.60926,2.75864,2.75864,0,0,1,.1773-.901c.1763-.535.414-1.045.64183-1.55913A12.686,12.686,0,0,0,15.85,10.47863a1.58461,1.58461,0,0,0,.04861-.87208,1.04531,1.04531,0,0,0-.85432-.83981,1.60658,1.60658,0,0,0-1.23654.16594.27593.27593,0,0,1-.36286-.03413c-.085-.0747-.16594-.15379-.24918-.23055a.98682.98682,0,0,0-1.33577-.04933,6.1468,6.1468,0,0,1-.4989.41615.47762.47762,0,0,1-.51535.03566c-.17448-.09307-.35512-.175-.53531-.25665a1.74949,1.74949,0,0,0-.56476-.2016,1.69943,1.69943,0,0,0-1.61654.91787,8.05815,8.05815,0,0,0-.32952.80126c-.45471,1.2557-.82507,2.53825-1.20838,3.81639a1.24151,1.24151,0,0,0,.51532,1.44389,1.42659,1.42659,0,0,0,1.22008.17166,1.09728,1.09728,0,0,0,.66994-.69764c.44145-1.04111.839-2.09989,1.25981-3.14926.11581-.28876.22792-.57874.35078-.86438a.44548.44548,0,0,1,.69189-.19539.50521.50521,0,0,1,.15044.43836,1.75625,1.75625,0,0,1-.14731.50453c-.27379.69219-.55265,1.38236-.82766,2.074a2.0836,2.0836,0,0,0-.14038.42876.50719.50719,0,0,0,.27082.57722.87236.87236,0,0,0,.66145.02739.99137.99137,0,0,0,.53406-.532q.61571-1.20914,1.228-2.42031.28423-.55863.57585-1.1133a.87189.87189,0,0,1,.29055-.35253.34987.34987,0,0,1,.37634-.01265.30291.30291,0,0,1,.12434.31459.56716.56716,0,0,1-.04655.1915c-.05318.12739-.10286.25669-.16183.38156-.34118.71775-.68754,1.43273-1.02568,2.152A2.00213,2.00213,0,0,0,12.88816,14.44366Zm4.78568,5.28972a.88573.88573,0,0,0-1.77139.00465.8857.8857,0,0,0,1.77139-.00465Zm-14.83838-7.296a.84329.84329,0,1,0,.00827-1.68655.8433.8433,0,0,0-.00827,1.68655Zm10.366-9.43673a.83506.83506,0,1,0-.0091,1.67.83505.83505,0,0,0,.0091-1.67Zm6.85014,5.22a.71651.71651,0,0,0-1.433.0093.71656.71656,0,0,0,1.433-.0093ZM5.37528,6.17908A.63823.63823,0,1,0,6.015,5.54483.62292.62292,0,0,0,5.37528,6.17908Zm6.68214,14.80843a.54949.54949,0,1,0-.55052.541A.54556.54556,0,0,0,12.05742,20.98752Zm8.53235-8.49689a.54777.54777,0,0,0-.54027.54023.53327.53327,0,0,0,.532.52293.51548.51548,0,0,0,.53272-.5237A.53187.53187,0,0,0,20.58977,12.49063ZM7.82846,2.4715a.44927.44927,0,1,0,.44484.44766A.43821.43821,0,0,0,7.82846,2.4715Zm13.775,7.60492a.41186.41186,0,0,0-.40065.39623.40178.40178,0,0,0,.40168.40168A.38994.38994,0,0,0,22,10.48172.39946.39946,0,0,0,21.60349,10.07642ZM5.79193,17.96207a.40469.40469,0,0,0-.397-.39646.399.399,0,0,0-.396.405.39234.39234,0,0,0,.39939.389A.39857.39857,0,0,0,5.79193,17.96207Z"></path></svg>',
'pinterest' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"></path></svg>',
'pocket' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M21.927,4.194C21.667,3.48,20.982,3,20.222,3h-0.01h-1.721H3.839C3.092,3,2.411,3.47,2.145,4.17 C2.066,4.378,2.026,4.594,2.026,4.814v6.035l0.069,1.2c0.29,2.73,1.707,5.115,3.899,6.778c0.039,0.03,0.079,0.059,0.119,0.089 l0.025,0.018c1.175,0.859,2.491,1.441,3.91,1.727c0.655,0.132,1.325,0.2,1.991,0.2c0.615,0,1.232-0.057,1.839-0.17 c0.073-0.014,0.145-0.028,0.219-0.044c0.02-0.004,0.042-0.012,0.064-0.023c1.359-0.297,2.621-0.864,3.753-1.691l0.025-0.018 c0.04-0.029,0.08-0.058,0.119-0.089c2.192-1.664,3.609-4.049,3.898-6.778l0.069-1.2V4.814C22.026,4.605,22,4.398,21.927,4.194z M17.692,10.481l-4.704,4.512c-0.266,0.254-0.608,0.382-0.949,0.382c-0.342,0-0.684-0.128-0.949-0.382l-4.705-4.512 C5.838,9.957,5.82,9.089,6.344,8.542c0.524-0.547,1.392-0.565,1.939-0.04l3.756,3.601l3.755-3.601 c0.547-0.524,1.415-0.506,1.939,0.04C18.256,9.089,18.238,9.956,17.692,10.481z"></path></svg>',
'reddit' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,11.816c0-1.256-1.021-2.277-2.277-2.277c-0.593,0-1.122,0.24-1.526,0.614c-1.481-0.965-3.455-1.594-5.647-1.69 l1.171-3.702l3.18,0.748c0.008,1.028,0.846,1.862,1.876,1.862c1.035,0,1.877-0.842,1.877-1.878c0-1.035-0.842-1.877-1.877-1.877 c-0.769,0-1.431,0.466-1.72,1.13l-3.508-0.826c-0.203-0.047-0.399,0.067-0.46,0.261l-1.35,4.268 c-2.316,0.038-4.411,0.67-5.97,1.671C5.368,9.765,4.853,9.539,4.277,9.539C3.021,9.539,2,10.56,2,11.816 c0,0.814,0.433,1.523,1.078,1.925c-0.037,0.221-0.061,0.444-0.061,0.672c0,3.292,4.011,5.97,8.941,5.97s8.941-2.678,8.941-5.97 c0-0.214-0.02-0.424-0.053-0.632C21.533,13.39,22,12.661,22,11.816z M18.776,4.394c0.606,0,1.1,0.493,1.1,1.1s-0.493,1.1-1.1,1.1 s-1.1-0.494-1.1-1.1S18.169,4.394,18.776,4.394z M2.777,11.816c0-0.827,0.672-1.5,1.499-1.5c0.313,0,0.598,0.103,0.838,0.269 c-0.851,0.676-1.477,1.479-1.812,2.36C2.983,12.672,2.777,12.27,2.777,11.816z M11.959,19.606c-4.501,0-8.164-2.329-8.164-5.193 S7.457,9.22,11.959,9.22s8.164,2.329,8.164,5.193S16.46,19.606,11.959,19.606z M20.636,13.001c-0.326-0.89-0.948-1.701-1.797-2.384 c0.248-0.186,0.55-0.301,0.883-0.301c0.827,0,1.5,0.673,1.5,1.5C21.223,12.299,20.992,12.727,20.636,13.001z M8.996,14.704 c-0.76,0-1.397-0.616-1.397-1.376c0-0.76,0.637-1.397,1.397-1.397c0.76,0,1.376,0.637,1.376,1.397 C10.372,14.088,9.756,14.704,8.996,14.704z M16.401,13.328c0,0.76-0.616,1.376-1.376,1.376c-0.76,0-1.399-0.616-1.399-1.376 c0-0.76,0.639-1.397,1.399-1.397C15.785,11.931,16.401,12.568,16.401,13.328z M15.229,16.708c0.152,0.152,0.152,0.398,0,0.55 c-0.674,0.674-1.727,1.002-3.219,1.002c-0.004,0-0.007-0.002-0.011-0.002c-0.004,0-0.007,0.002-0.011,0.002 c-1.492,0-2.544-0.328-3.218-1.002c-0.152-0.152-0.152-0.398,0-0.55c0.152-0.152,0.399-0.151,0.55,0 c0.521,0.521,1.394,0.775,2.669,0.775c0.004,0,0.007,0.002,0.011,0.002c0.004,0,0.007-0.002,0.011-0.002 c1.275,0,2.148-0.253,2.669-0.775C14.831,16.556,15.078,16.556,15.229,16.708z"></path></svg>',
'skype' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></path></svg>',
'snapchat' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.065,2a5.526,5.526,0,0,1,3.132.892A5.854,5.854,0,0,1,17.326,5.4a5.821,5.821,0,0,1,.351,2.33q0,.612-.117,2.487a.809.809,0,0,0,.365.091,1.93,1.93,0,0,0,.664-.176,1.93,1.93,0,0,1,.664-.176,1.3,1.3,0,0,1,.729.234.7.7,0,0,1,.351.6.839.839,0,0,1-.41.7,2.732,2.732,0,0,1-.9.41,3.192,3.192,0,0,0-.9.378.728.728,0,0,0-.41.618,1.575,1.575,0,0,0,.156.56,6.9,6.9,0,0,0,1.334,1.953,5.6,5.6,0,0,0,1.881,1.315,5.875,5.875,0,0,0,1.042.3.42.42,0,0,1,.365.456q0,.911-2.852,1.341a1.379,1.379,0,0,0-.143.507,1.8,1.8,0,0,1-.182.605.451.451,0,0,1-.429.241,5.878,5.878,0,0,1-.807-.085,5.917,5.917,0,0,0-.833-.085,4.217,4.217,0,0,0-.807.065,2.42,2.42,0,0,0-.82.293,6.682,6.682,0,0,0-.755.5q-.351.267-.755.527a3.886,3.886,0,0,1-.989.436A4.471,4.471,0,0,1,11.831,22a4.307,4.307,0,0,1-1.256-.176,3.784,3.784,0,0,1-.976-.436q-.4-.26-.749-.527a6.682,6.682,0,0,0-.755-.5,2.422,2.422,0,0,0-.807-.293,4.432,4.432,0,0,0-.82-.065,5.089,5.089,0,0,0-.853.1,5,5,0,0,1-.762.1.474.474,0,0,1-.456-.241,1.819,1.819,0,0,1-.182-.618,1.411,1.411,0,0,0-.143-.521q-2.852-.429-2.852-1.341a.42.42,0,0,1,.365-.456,5.793,5.793,0,0,0,1.042-.3,5.524,5.524,0,0,0,1.881-1.315,6.789,6.789,0,0,0,1.334-1.953A1.575,1.575,0,0,0,6,12.9a.728.728,0,0,0-.41-.618,3.323,3.323,0,0,0-.9-.384,2.912,2.912,0,0,1-.9-.41.814.814,0,0,1-.41-.684.71.71,0,0,1,.338-.593,1.208,1.208,0,0,1,.716-.241,1.976,1.976,0,0,1,.625.169,2.008,2.008,0,0,0,.69.169.919.919,0,0,0,.416-.091q-.117-1.849-.117-2.474A5.861,5.861,0,0,1,6.385,5.4,5.516,5.516,0,0,1,8.625,2.819,7.075,7.075,0,0,1,12.062,2Z"></path></svg>',
'soundcloud' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z"></path></svg>',
'spotify' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2 M16.586,16.424 c-0.18,0.295-0.563,0.387-0.857,0.207c-2.348-1.435-5.304-1.76-8.785-0.964c-0.335,0.077-0.67-0.133-0.746-0.469 c-0.077-0.335,0.132-0.67,0.469-0.746c3.809-0.871,7.077-0.496,9.713,1.115C16.673,15.746,16.766,16.13,16.586,16.424 M17.81,13.7 c-0.226,0.367-0.706,0.482-1.072,0.257c-2.687-1.652-6.785-2.131-9.965-1.166C6.36,12.917,5.925,12.684,5.8,12.273 C5.675,11.86,5.908,11.425,6.32,11.3c3.632-1.102,8.147-0.568,11.234,1.328C17.92,12.854,18.035,13.335,17.81,13.7 M17.915,10.865 c-3.223-1.914-8.54-2.09-11.618-1.156C5.804,9.859,5.281,9.58,5.131,9.086C4.982,8.591,5.26,8.069,5.755,7.919 c3.532-1.072,9.404-0.865,13.115,1.338c0.445,0.264,0.59,0.838,0.327,1.282C18.933,10.983,18.359,11.129,17.915,10.865"></path></svg>',
'tumblr' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.749,17.396c-0.357,0.17-1.041,0.319-1.551,0.332c-1.539,0.041-1.837-1.081-1.85-1.896V9.847h3.861V6.937h-3.847V2.039 c0,0-2.77,0-2.817,0c-0.046,0-0.127,0.041-0.138,0.144c-0.165,1.499-0.867,4.13-3.783,5.181v2.484h1.945v6.282 c0,2.151,1.587,5.206,5.775,5.135c1.413-0.024,2.982-0.616,3.329-1.126L16.749,17.396z"></path></svg>',
'twitch' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z"></path></svg>',
'twitter' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg>',
'vimeo' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22.396,7.164c-0.093,2.026-1.507,4.799-4.245,8.32C15.322,19.161,12.928,21,10.97,21c-1.214,0-2.24-1.119-3.079-3.359 c-0.56-2.053-1.119-4.106-1.68-6.159C5.588,9.243,4.921,8.122,4.206,8.122c-0.156,0-0.701,0.328-1.634,0.98L1.594,7.841 c1.027-0.902,2.04-1.805,3.037-2.708C6.001,3.95,7.03,3.327,7.715,3.264c1.619-0.156,2.616,0.951,2.99,3.321 c0.404,2.557,0.685,4.147,0.841,4.769c0.467,2.121,0.981,3.181,1.542,3.181c0.435,0,1.09-0.688,1.963-2.065 c0.871-1.376,1.338-2.422,1.401-3.142c0.125-1.187-0.343-1.782-1.401-1.782c-0.498,0-1.012,0.115-1.541,0.341 c1.023-3.35,2.977-4.977,5.862-4.884C21.511,3.066,22.52,4.453,22.396,7.164z"></path></svg>',
'vk' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,7.1c0.2,0.4-0.4,1.5-1.6,3.1c-0.2,0.2-0.4,0.5-0.7,0.9c-0.5,0.7-0.9,1.1-0.9,1.4c-0.1,0.3-0.1,0.6,0.1,0.8 c0.1,0.1,0.4,0.4,0.8,0.9h0l0,0c1,0.9,1.6,1.7,2,2.3c0,0,0,0.1,0.1,0.1c0,0.1,0,0.1,0.1,0.3c0,0.1,0,0.2,0,0.4 c0,0.1-0.1,0.2-0.3,0.3c-0.1,0.1-0.4,0.1-0.6,0.1l-2.7,0c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.1-0.5-0.2l-0.2-0.1 c-0.2-0.1-0.5-0.4-0.7-0.7s-0.5-0.6-0.7-0.8c-0.2-0.2-0.4-0.4-0.6-0.6C14.8,15,14.6,15,14.4,15c0,0,0,0-0.1,0c0,0-0.1,0.1-0.2,0.2 c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.3-0.2,0.5c-0.1,0.2-0.1,0.5-0.1,0.8c0,0.1,0,0.2,0,0.3c0,0.1-0.1,0.2-0.1,0.2l0,0.1 c-0.1,0.1-0.3,0.2-0.6,0.2h-1.2c-0.5,0-1,0-1.5-0.2c-0.5-0.1-1-0.3-1.4-0.6s-0.7-0.5-1.1-0.7s-0.6-0.4-0.7-0.6l-0.3-0.3 c-0.1-0.1-0.2-0.2-0.3-0.3s-0.4-0.5-0.7-0.9s-0.7-1-1.1-1.6c-0.4-0.6-0.8-1.3-1.3-2.2C2.9,9.4,2.5,8.5,2.1,7.5C2,7.4,2,7.3,2,7.2 c0-0.1,0-0.1,0-0.2l0-0.1c0.1-0.1,0.3-0.2,0.6-0.2l2.9,0c0.1,0,0.2,0,0.2,0.1S5.9,6.9,5.9,7L6,7c0.1,0.1,0.2,0.2,0.3,0.3 C6.4,7.7,6.5,8,6.7,8.4C6.9,8.8,7,9,7.1,9.2l0.2,0.3c0.2,0.4,0.4,0.8,0.6,1.1c0.2,0.3,0.4,0.5,0.5,0.7s0.3,0.3,0.4,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0.1-0.1c0,0,0.1-0.1,0.1-0.2c0.1-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.5,0.1-0.8 c0-0.4,0-0.8,0-1.3c0-0.3,0-0.5-0.1-0.8c0-0.2-0.1-0.4-0.1-0.5L9.6,7.6C9.4,7.3,9.1,7.2,8.7,7.1C8.6,7.1,8.6,7,8.7,6.9 C8.9,6.7,9,6.6,9.1,6.5c0.4-0.2,1.2-0.3,2.5-0.3c0.6,0,1,0.1,1.4,0.1c0.1,0,0.3,0.1,0.3,0.1c0.1,0.1,0.2,0.1,0.2,0.3 c0,0.1,0.1,0.2,0.1,0.3s0,0.3,0,0.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.7c0,0.3,0,0.6,0,0.9c0,0.1,0,0.2,0,0.4c0,0.2,0,0.4,0,0.5 c0,0.1,0,0.3,0,0.4s0.1,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.2,0.4-0.4 s0.3-0.4,0.5-0.7c0.2-0.3,0.5-0.7,0.7-1.1c0.4-0.7,0.8-1.5,1.1-2.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.1l0,0l0.1,0 c0,0,0,0,0.1,0s0.2,0,0.2,0l3,0c0.3,0,0.5,0,0.7,0S21.9,7,21.9,7L22,7.1z"></path></svg>',
'wordpress' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>',
'yelp' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',
'youtube' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg>',
);
/**
* Social Icons domain mappings.
*
* By default, each Icon ID is matched against a .com TLD. To override this behavior,
* specify all the domains it covers (including the .com TLD too, if applicable).
*
* @since 1.0.0
*
* @var array
*/
protected static $social_icons_map = array(
'amazon' => array(
'amazon.com',
'amazon.cn',
'amazon.in',
'amazon.fr',
'amazon.de',
'amazon.it',
'amazon.nl',
'amazon.es',
'amazon.co',
'amazon.ca',
),
'behance' => array(
'behance.net',
),
'codepen' => array(
'codepen.io',
),
'facebook' => array(
'facebook.com',
'fb.me',
),
'feed' => array(
'feed',
),
'lastfm' => array(
'last.fm',
),
'mail' => array(
'mailto:',
),
'pocket' => array(
'getpocket.com',
),
'twitch' => array(
'twitch.tv',
),
'wordpress' => array(
'wordpress.com',
'wordpress.org',
),
);
/**
* Gets the SVG code for a given icon.
*
* @static
*
* @access public
*
* @since 1.0.0
*
* @param string $group the icon group.
* @param string $icon The icon.
* @param int $size The icon-size in pixels.
*
* @return string
*/
public static function get_svg( $group, $icon, $size ) {
if ( 'ui' === $group ) {
$arr = self::$icons;
} elseif ( 'social' === $group ) {
$arr = self::$social_icons;
} else {
$arr = array();
}
/**
* Filters Twenty Twenty-Ones's array of icons.
*
* The dynamic portion of the hook name, `$group`, refers to
* the name of the group of icons, either "ui" or "social".
*
* @since 1.0.0
*
* @param array $arr Array of icons.
*/
$arr = apply_filters( "twenty_twenty_one_svg_icons_{$group}", $arr );
$svg = '';
if ( array_key_exists( $icon, $arr ) ) {
$repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size );
$svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
}
return $svg;
}
/**
* Detects the social network from a URL and returns the SVG code for its icon.
*
* @static
*
* @access public
*
* @since 1.0.0
*
* @param string $uri Social link.
* @param int $size The icon-size in pixels.
*
* @return string|null
*/
public static function get_social_link_svg( $uri, $size ) {
static $regex_map; // Only compute regex map once, for performance.
if ( ! isset( $regex_map ) ) {
$regex_map = array();
/**
* Filters Twenty Twenty-Ones's array of domain mappings for social icons.
*
* By default, each Icon ID is matched against a .com TLD. To override this behavior,
* specify all the domains it covers (including the .com TLD too, if applicable).
*
* @since 1.0.0
*
* @param array $social_icons_map Array of default social icons.
*/
$map = apply_filters( 'twenty_twenty_one_social_icons_map', self::$social_icons_map );
/**
* Filters Twenty Twenty-One's array of social icons.
*
* @since 1.0.0
*
* @param array $social_icons Array of default social icons.
*/
$social_icons = apply_filters( 'twenty_twenty_one_svg_icons_social', self::$social_icons );
foreach ( array_keys( $social_icons ) as $icon ) {
$domains = array_key_exists( $icon, $map ) ? $map[ $icon ] : array( sprintf( '%s.com', $icon ) );
$domains = array_map( 'trim', $domains ); // Remove leading/trailing spaces, to prevent regex from failing to match.
$domains = array_map( 'preg_quote', $domains );
$regex_map[ $icon ] = sprintf( '/(%s)/i', implode( '|', $domains ) );
}
}
foreach ( $regex_map as $icon => $regex ) {
if ( preg_match( $regex, $uri ) ) {
return self::get_svg( 'social', $icon, $size ) . '<span class="screen-reader-text">';
}
}
return null;
}
}

View File

@ -0,0 +1,95 @@
<?php
/**
* The template for displaying comments
*
* This is the template that displays the area of the page that contains both the current comments
* and the comment form.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/*
* If the current post is protected by a password and
* the visitor has not yet entered the password we will
* return early without loading the comments.
*/
if ( post_password_required() ) {
return;
}
$twenty_twenty_one_comment_count = get_comments_number();
?>
<div id="comments" class="comments-area default-max-width <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
<?php
if ( have_comments() ) :
;
?>
<h2 class="comments-title">
<?php if ( '1' === $twenty_twenty_one_comment_count ) : ?>
<?php esc_html_e( '1 Reply', 'twentytwentyone' ); ?>
<?php else : ?>
<?php
printf(
/* translators: %s: comment count number. */
esc_html( _nx( '%s Reply', '%s Replies', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
esc_html( number_format_i18n( $twenty_twenty_one_comment_count ) )
);
?>
<?php endif; ?>
</h2><!-- .comments-title -->
<ol class="comment-list">
<?php
wp_list_comments(
array(
'avatar_size' => 60,
'style' => 'ol',
'short_ping' => true,
)
);
?>
</ol><!-- .comment-list -->
<?php
the_comments_pagination(
array(
/* translators: There is a space after page. */
'before_page_number' => esc_html__( 'Page ', 'twentytwentyone' ),
'mid_size' => 0,
'prev_text' => sprintf(
'%s <span class="nav-prev-text">%s</span>',
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ),
esc_html__( 'Older comments', 'twentytwentyone' )
),
'next_text' => sprintf(
'<span class="nav-next-text">%s</span> %s',
esc_html__( 'Newer comments', 'twentytwentyone' ),
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' )
),
)
);
?>
<?php if ( ! comments_open() ) : ?>
<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'twentytwentyone' ); ?></p>
<?php endif; ?>
<?php endif; ?>
<?php
comment_form(
array(
'logged_in_as' => null,
'title_reply' => esc_html__( 'Leave a reply', 'twentytwentyone' ),
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
)
);
?>
</div><!-- #comments -->

View File

@ -0,0 +1,73 @@
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
</main><!-- #main -->
</section><!-- #primary -->
</div><!-- #content -->
<?php get_template_part( 'template-parts/footer/footer-widgets' ); ?>
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'footer' ) ) : ?>
<nav aria-label="<?php esc_attr_e( 'Secondary menu', 'twentytwentyone' ); ?>" class="footer-navigation">
<ul class="footer-navigation-wrapper">
<?php
wp_nav_menu(
array(
'theme_location' => 'footer',
'items_wrap' => '%3$s',
'container' => 'false',
'depth' => 1,
'link_before' => '<span>',
'link_after' => '</span>',
)
);
?>
</ul><!-- .footer-navigation-wrapper -->
</nav><!-- .footer-navigation -->
<?php endif; ?>
<div class="site-info">
<div class="site-name">
<?php if ( has_custom_logo() ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php else : ?>
<?php if ( get_bloginfo( 'name' ) && get_theme_mod( 'display_title_and_tagline', true ) ) : ?>
<?php if ( is_front_page() && ! is_paged() ) : ?>
<?php bloginfo( 'name' ); ?>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
</div><!-- .site-name -->
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_attr__( 'https://wordpress.org/', 'twentytwentyone' ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

View File

@ -0,0 +1,547 @@
<?php
/**
* Functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// This theme requires WordPress 5.3 or later.
if ( version_compare( $GLOBALS['wp_version'], '5.3', '<' ) ) {
require get_template_directory() . '/inc/back-compat.php';
}
if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_setup() {
/*
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
* If you're building a theme based on Twenty Twenty-One, use a find and replace
* to change 'twentytwentyone' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'twentytwentyone', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );
/**
* Add post-formats support.
*/
add_theme_support(
'post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
'video',
'audio',
'chat',
)
);
/*
* Enable support for Post Thumbnails on posts and pages.
*
* @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
*/
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1568, 9999 );
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Navigation', 'twentytwentyone' ),
'footer' => __( 'Footer Navigation', 'twentytwentyone' ),
)
);
/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support(
'html5',
array(
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
'navigation-widgets',
)
);
/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
$logo_width = 300;
$logo_height = 100;
add_theme_support(
'custom-logo',
array(
'height' => $logo_height,
'width' => $logo_width,
'flex-width' => true,
'flex-height' => true,
'unlink-homepage-logo' => true,
)
);
// Add theme support for selective refresh for widgets.
add_theme_support( 'customize-selective-refresh-widgets' );
// Add support for Block Styles.
add_theme_support( 'wp-block-styles' );
// Add support for full and wide align images.
add_theme_support( 'align-wide' );
// Add support for editor styles.
add_theme_support( 'editor-styles' );
$editor_stylesheet_path = './assets/css/style-editor.css';
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE;
if ( $is_IE ) {
$editor_stylesheet_path = './assets/css/ie-editor.css';
}
// Enqueue editor styles.
add_editor_style( $editor_stylesheet_path );
// Add custom editor font sizes.
add_theme_support(
'editor-font-sizes',
array(
array(
'name' => esc_html__( 'Extra small', 'twentytwentyone' ),
'shortName' => esc_html__( 'XS', 'twentytwentyone' ),
'size' => 16,
'slug' => 'extra-small',
),
array(
'name' => esc_html__( 'Small', 'twentytwentyone' ),
'shortName' => esc_html__( 'S', 'twentytwentyone' ),
'size' => 18,
'slug' => 'small',
),
array(
'name' => esc_html__( 'Normal', 'twentytwentyone' ),
'shortName' => esc_html__( 'M', 'twentytwentyone' ),
'size' => 20,
'slug' => 'normal',
),
array(
'name' => esc_html__( 'Large', 'twentytwentyone' ),
'shortName' => esc_html__( 'L', 'twentytwentyone' ),
'size' => 24,
'slug' => 'large',
),
array(
'name' => esc_html__( 'Extra Large', 'twentytwentyone' ),
'shortName' => esc_html__( 'XL', 'twentytwentyone' ),
'size' => 40,
'slug' => 'extra-large',
),
array(
'name' => esc_html__( 'Huge', 'twentytwentyone' ),
'shortName' => esc_html__( 'XXL', 'twentytwentyone' ),
'size' => 96,
'slug' => 'huge',
),
array(
'name' => esc_html__( 'Gigantic', 'twentytwentyone' ),
'shortName' => esc_html__( 'XXXL', 'twentytwentyone' ),
'size' => 144,
'slug' => 'gigantic',
),
)
);
// Custom background color.
add_theme_support(
'custom-background',
array(
'default-color' => 'd1e4dd',
)
);
// Editor color palette.
$black = '#000000';
$dark_gray = '#28303D';
$gray = '#39414D';
$green = '#D1E4DD';
$blue = '#D1DFE4';
$purple = '#D1D1E4';
$red = '#E4D1D1';
$orange = '#E4DAD1';
$yellow = '#EEEADD';
$white = '#FFFFFF';
add_theme_support(
'editor-color-palette',
array(
array(
'name' => esc_html__( 'Black', 'twentytwentyone' ),
'slug' => 'black',
'color' => $black,
),
array(
'name' => esc_html__( 'Dark Gray', 'twentytwentyone' ),
'slug' => 'dark-gray',
'color' => $dark_gray,
),
array(
'name' => esc_html__( 'Gray', 'twentytwentyone' ),
'slug' => 'gray',
'color' => $gray,
),
array(
'name' => esc_html__( 'Green', 'twentytwentyone' ),
'slug' => 'green',
'color' => $green,
),
array(
'name' => esc_html__( 'Blue', 'twentytwentyone' ),
'slug' => 'blue',
'color' => $blue,
),
array(
'name' => esc_html__( 'Purple', 'twentytwentyone' ),
'slug' => 'purple',
'color' => $purple,
),
array(
'name' => esc_html__( 'Red', 'twentytwentyone' ),
'slug' => 'red',
'color' => $red,
),
array(
'name' => esc_html__( 'Orange', 'twentytwentyone' ),
'slug' => 'orange',
'color' => $orange,
),
array(
'name' => esc_html__( 'Yellow', 'twentytwentyone' ),
'slug' => 'yellow',
'color' => $yellow,
),
array(
'name' => esc_html__( 'White', 'twentytwentyone' ),
'slug' => 'white',
'color' => $white,
),
)
);
add_theme_support(
'editor-gradient-presets',
array(
array(
'name' => esc_html__( 'Purple to Yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $yellow . ')',
'slug' => 'purple-to-yellow',
),
array(
'name' => esc_html__( 'Yellow to Purple', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $purple . ')',
'slug' => 'yellow-to-purple',
),
array(
'name' => esc_html__( 'Green to Yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $green . ', ' . $yellow . ')',
'slug' => 'green-to-yellow',
),
array(
'name' => esc_html__( 'Yellow to Green', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $green . ')',
'slug' => 'yellow-to-green',
),
array(
'name' => esc_html__( 'Red to Yellow', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $yellow . ')',
'slug' => 'red-to-yellow',
),
array(
'name' => esc_html__( 'Yellow to Red', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $red . ')',
'slug' => 'yellow-to-red',
),
array(
'name' => esc_html__( 'Purple to Red', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $red . ')',
'slug' => 'purple-to-red',
),
array(
'name' => esc_html__( 'Red to Purple', 'twentytwentyone' ),
'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $purple . ')',
'slug' => 'red-to-purple',
),
)
);
/*
* Adds starter content to highlight the theme on fresh sites.
* This is done conditionally to avoid loading the starter content on every
* page load, as it is a one-off operation only needed once in the customizer.
*/
if ( is_customize_preview() ) {
require get_template_directory() . '/inc/starter-content.php';
add_theme_support( 'starter-content', twenty_twenty_one_get_starter_content() );
}
// Add support for responsive embedded content.
add_theme_support( 'responsive-embeds' );
// Add support for custom line height controls.
add_theme_support( 'custom-line-height' );
// Add support for experimental link color control.
add_theme_support( 'experimental-link-color' );
// Add support for experimental cover block spacing.
add_theme_support( 'experimental-custom-spacing' );
// Add support for custom units.
add_theme_support( 'custom-units' );
}
}
add_action( 'after_setup_theme', 'twenty_twenty_one_setup' );
/**
* Register widget area.
*
* @since 1.0.0
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*
* @return void
*/
function twenty_twenty_one_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( 'Footer', 'twentytwentyone' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here to appear in your footer.', 'twentytwentyone' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'twenty_twenty_one_widgets_init' );
/**
* Set the content width in pixels, based on the theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @since 1.0.0
*
* @global int $content_width Content width.
*
* @return void
*/
function twenty_twenty_one_content_width() {
// This variable is intended to be overruled from themes.
// Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}.
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$GLOBALS['content_width'] = apply_filters( 'twenty_twenty_one_content_width', 750 );
}
add_action( 'after_setup_theme', 'twenty_twenty_one_content_width', 0 );
/**
* Enqueue scripts and styles.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_scripts() {
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE;
if ( $is_IE ) {
// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
} else {
// If not IE, use the standard stylesheet.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}
// RTL styles.
wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );
// Print styles.
wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
// Threaded comment reply styles.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Main navigation scripts.
if ( has_nav_menu( 'primary' ) ) {
wp_register_script(
'twenty-twenty-one-ie11-polyfills',
get_template_directory_uri() . '/assets/js/polyfills.js',
array(),
wp_get_theme()->get( 'Version' ),
true
);
wp_enqueue_script(
'twenty-twenty-one-primary-navigation-script',
get_template_directory_uri() . '/assets/js/primary-navigation.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
wp_get_theme()->get( 'Version' ),
true
);
}
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
/**
* Enqueue block editor script.
*
* @since 1.0.0
*
* @return void
*/
function twentytwentyone_block_editor_script() {
wp_enqueue_script( 'twentytwentyone-unregister-block-style', get_theme_file_uri( '/assets/js/unregister-block-style.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'enqueue_block_editor_assets', 'twentytwentyone_block_editor_script' );
/**
* Fix skip link focus in IE11.
*
* This does not enqueue the script because it is tiny and because it is only for IE11,
* thus it does not warrant having an entire dedicated blocking script being loaded.
*
* @link https://git.io/vWdr2
*/
function twenty_twenty_one_skip_link_focus_fix() {
// If SCRIPT_DEBUG is defined and true, print the unminified file.
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
echo '<script>';
include get_template_directory() . '/assets/js/skip-link-focus-fix.js';
echo '</script>';
}
// The following is minified via `npx terser --compress --mangle -- assets/js/skip-link-focus-fix.js`.
?>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",(function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())}),!1);
</script>
<?php
}
add_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' );
/** Enqueue non-latin language styles
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_non_latin_languages() {
$custom_css = twenty_twenty_one_get_non_latin_css( 'front-end' );
if ( $custom_css ) {
wp_add_inline_style( 'twenty-twenty-one-style', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_non_latin_languages' );
// SVG Icons class.
require get_template_directory() . '/classes/class-twenty-twenty-one-svg-icons.php';
// Custom color classes.
require get_template_directory() . '/classes/class-twenty-twenty-one-custom-colors.php';
new Twenty_Twenty_One_Custom_Colors();
// Enhance the theme by hooking into WordPress.
require get_template_directory() . '/inc/template-functions.php';
// Menu functions and filters.
require get_template_directory() . '/inc/menu-functions.php';
// Custom template tags for the theme.
require get_template_directory() . '/inc/template-tags.php';
// Customizer additions.
require get_template_directory() . '/classes/class-twenty-twenty-one-customize.php';
new Twenty_Twenty_One_Customize();
// Block Patterns.
require get_template_directory() . '/inc/block-patterns.php';
// Block Styles.
require get_template_directory() . '/inc/block-styles.php';
/**
* Enqueue scripts for the customizer preview.
*
* @since 1.0.0
*
* @return void
*/
function twentytwentyone_customize_preview_init() {
wp_enqueue_script(
'twentytwentyone-customize-preview',
get_theme_file_uri( '/assets/js/customize-preview.js' ),
array( 'customize-preview', 'customize-selective-refresh', 'jquery' ),
get_theme_file_path( 'assets/js/customize-preview.js' ),
true
);
}
add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
/**
* Calculate any classes we may want to add to the main <html> element.
*
* @since 1.0.0
*
* @return void
*/
function twentytwentyone_the_html_classes() {
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
echo 'class="has-default-light-palette-background"';
}
}

View File

@ -0,0 +1,32 @@
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until main.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<!doctype html>
<html <?php language_attributes(); ?> <?php twentytwentyone_the_html_classes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'twentytwentyone' ); ?></a>
<?php get_template_part( 'template-parts/header/site-header' ); ?>
<div id="content" class="site-content">
<section id="primary" class="content-area">
<main id="main" class="site-main" role="main">

View File

@ -0,0 +1,110 @@
<?php
/**
* The template for displaying image attachments
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
// Start the loop.
while ( have_posts() ) {
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header alignwide">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<figure class="wp-block-image">
<?php
/**
* Filter the default image attachment size.
*
* @param string $image_size Image size. Default 'large'.
*/
$image_size = apply_filters( 'twenty_twenty_one_attachment_size', 'full' );
echo wp_get_attachment_image( get_the_ID(), $image_size );
?>
<?php if ( wp_get_attachment_caption() ) : ?>
<figcaption class="wp-caption-text"><?php echo wp_kses_post( wp_get_attachment_caption() ); ?></figcaption>
<?php endif; ?>
</figure><!-- .wp-block-image -->
<?php
the_content();
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
'after' => '</nav>',
/* translators: There is a space after page. */
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer default-max-width">
<?php
// Check if there is a parent, then add the published in link.
if ( wp_get_post_parent_id( $post ) ) {
echo '<span class="posted-on">';
printf(
/* translators: %s: parent post. */
esc_html__( 'Published in %s', 'twentytwentyone' ),
'<a href="' . esc_url( get_the_permalink( wp_get_post_parent_id( $post ) ) ) . '">' . esc_html( get_the_title( wp_get_post_parent_id( $post ) ) ) . '</a>'
);
echo '</span>';
} else {
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Name of current post. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span>'
);
}
// Retrieve attachment metadata.
$metadata = wp_get_attachment_metadata();
if ( $metadata ) {
printf(
'<span class="full-size-link"><span class="screen-reader-text">%1$s</span><a href="%2$s">%3$s &times; %4$s</a></span>',
esc_html_x( 'Full size', 'Used before full size attachment link.', 'twentytwentyone' ), // phpcs:ignore WordPress.Security.EscapeOutput
esc_url( wp_get_attachment_url() ),
absint( $metadata['width'] ),
absint( $metadata['height'] )
);
}
if ( wp_get_post_parent_id( $post ) ) {
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Name of current post. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span><br>'
);
}
?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
<?php
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
} // End the loop.
get_footer();

View File

@ -0,0 +1,92 @@
<?php
/**
* Back compat functionality
*
* Prevents the theme from running on WordPress versions prior to 5.3,
* since this theme is not meant to be backward compatible beyond that and
* relies on many newer functions and markup changes introduced in 5.3.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Display upgrade notice on theme switch.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_switch_theme() {
add_action( 'admin_notices', 'twenty_twenty_one_upgrade_notice' );
}
add_action( 'after_switch_theme', 'twenty_twenty_one_switch_theme' );
/**
* Adds a message for unsuccessful theme switch.
*
* Prints an update nag after an unsuccessful attempt to switch to
* the theme on WordPress versions prior to 5.3.
*
* @since 1.0.0
*
* @global string $wp_version WordPress version.
*
* @return void
*/
function twenty_twenty_one_upgrade_notice() {
echo '<div class="error"><p>';
printf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
);
echo '</p></div>';
}
/**
* Prevents the Customizer from being loaded on WordPress versions prior to 5.3.
*
* @since 1.0.0
*
* @global string $wp_version WordPress version.
*
* @return void
*/
function twenty_twenty_one_customize() {
wp_die(
sprintf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
),
'',
array(
'back_link' => true,
)
);
}
add_action( 'load-customize.php', 'twenty_twenty_one_customize' );
/**
* Prevents the Theme Preview from being loaded on WordPress versions prior to 5.3.
*
* @since 1.0.0
*
* @global string $wp_version WordPress version.
*
* @return void
*/
function twenty_twenty_one_preview() {
if ( isset( $_GET['preview'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
wp_die(
sprintf(
/* translators: %s: WordPress Version. */
esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
esc_html( $GLOBALS['wp_version'] )
)
);
}
}
add_action( 'template_redirect', 'twenty_twenty_one_preview' );

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,112 @@
<?php
/**
* Block Styles
*
* @link https://developer.wordpress.org/reference/functions/register_block_style/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
if ( function_exists( 'register_block_style' ) ) {
/**
* Register block styles.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_register_block_styles() {
// Columns: Overlap.
register_block_style(
'core/columns',
array(
'name' => 'twentytwentyone-columns-overlap',
'label' => esc_html__( 'Overlap', 'twentytwentyone' ),
)
);
// Cover: Borders.
register_block_style(
'core/cover',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Group: Borders.
register_block_style(
'core/group',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Image: Borders.
register_block_style(
'core/image',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Image: Frame.
register_block_style(
'core/image',
array(
'name' => 'twentytwentyone-image-frame',
'label' => esc_html__( 'Frame', 'twentytwentyone' ),
)
);
// Latest Posts: Dividers.
register_block_style(
'core/latest-posts',
array(
'name' => 'twentytwentyone-latest-posts-dividers',
'label' => esc_html__( 'Dividers', 'twentytwentyone' ),
)
);
// Latest Posts: Borders.
register_block_style(
'core/latest-posts',
array(
'name' => 'twentytwentyone-latest-posts-borders',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Media & Text: Borders.
register_block_style(
'core/media-text',
array(
'name' => 'twentytwentyone-border',
'label' => esc_html__( 'Borders', 'twentytwentyone' ),
)
);
// Separator: Thick.
register_block_style(
'core/separator',
array(
'name' => 'twentytwentyone-separator-thick',
'label' => esc_html__( 'Thick', 'twentytwentyone' ),
)
);
// Social icons: Dark gray color.
register_block_style(
'core/social-links',
array(
'name' => 'twentytwentyone-social-icons-color',
'label' => esc_html__( 'Dark Gray', 'twentytwentyone' ),
)
);
}
add_action( 'init', 'twenty_twenty_one_register_block_styles' );
}

View File

@ -0,0 +1,43 @@
<?php
/**
* Custom CSS
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Generate CSS.
*
* @since 1.0.0
*
* @param string $selector The CSS selector.
* @param string $style The CSS style.
* @param string $value The CSS value.
* @param string $prefix The CSS prefix.
* @param string $suffix The CSS suffix.
* @param bool $echo Echo the styles.
*
* @return string
*/
function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) {
// Bail early if we have no $selector elements or properties and $value.
if ( ! $value || ! $selector ) {
return '';
}
$css = sprintf( '%s { %s: %s; }', $selector, $style, $prefix . $value . $suffix );
if ( $echo ) {
/**
* Note to reviewers: $css contains auto-generated CSS.
* It is included inside <style> tags and can only be interpreted as CSS on the browser.
* Using wp_strip_all_tags() here is sufficient escaping since we just need to avoid
* malicious attempts to close </style> and open a <script>.
*/
echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput
}
return $css;
}

View File

@ -0,0 +1,98 @@
<?php
/**
* Functions and filters related to the menus.
*
* Makes the default WordPress navigation use an HTML structure similar
* to the Navigation block.
*
* @link https://make.wordpress.org/themes/2020/07/06/printing-navigation-block-html-from-a-legacy-menu-in-themes/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Add a button to top-level menu items that has sub-menus.
* An icon is added using CSS depending on the value of aria-expanded.
*
* @since 1.0.0
*
* @param string $output Nav menu item start element.
* @param object $item Nav menu item.
* @param int $depth Depth.
* @param object $args Nav menu args.
*
* @return string Nav menu item start element.
*/
function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {
// Add toggle button.
$output .= '<button class="sub-menu-toggle" aria-expanded="false" onClick="twentytwentyoneExpandSubMenu(this)">';
$output .= '<span class="icon-plus">' . twenty_twenty_one_get_icon_svg( 'ui', 'plus', 18 ) . '</span>';
$output .= '<span class="icon-minus">' . twenty_twenty_one_get_icon_svg( 'ui', 'minus', 18 ) . '</span>';
$output .= '<span class="screen-reader-text">' . esc_html__( 'Open menu', 'twentytwentyone' ) . '</span>';
$output .= '</button>';
}
return $output;
}
add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_add_sub_menu_toggle', 10, 4 );
/**
* Detects the social network from a URL and returns the SVG code for its icon.
*
* @since 1.0.0
*
* @param string $uri Social link.
* @param int $size The icon size in pixels.
*
* @return string
*/
function twenty_twenty_one_get_social_link_svg( $uri, $size = 24 ) {
return Twenty_Twenty_One_SVG_Icons::get_social_link_svg( $uri, $size );
}
/**
* Displays SVG icons in the footer navigation.
*
* @param string $item_output The menu item's starting HTML output.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of the menu. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return string The menu item output with social icon.
*/
function twenty_twenty_one_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
// Change SVG icon inside social links menu if there is supported URL.
if ( 'footer' === $args->theme_location ) {
$svg = twenty_twenty_one_get_social_link_svg( $item->url, 24 );
if ( ! empty( $svg ) ) {
$item_output = str_replace( $args->link_before, $svg, $item_output );
}
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'twenty_twenty_one_nav_menu_social_icons', 10, 4 );
/**
* Filters the arguments for a single nav menu item.
*
* @since 1.0.0
*
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*
* @return stdClass
*/
function twenty_twenty_one_add_menu_description_args( $args, $item, $depth ) {
$args->link_after = '';
if ( 0 === $depth && isset( $item->description ) && $item->description ) {
// The extra <span> element is here for styling purposes: Allows the description to not be underlined on hover.
$args->link_after = '<p class="menu-item-description"><span>' . $item->description . '</span></p>';
}
return $args;
}
add_filter( 'nav_menu_item_args', 'twenty_twenty_one_add_menu_description_args', 10, 3 );

View File

@ -0,0 +1,184 @@
<?php
/**
* Twenty Twenty-One Starter Content
*
* @link https://make.wordpress.org/core/2016/11/30/starter-content-for-themes-in-4-7/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Function to return the array of starter content for the theme.
*
* Passes it through the `twentytwenty_starter_content` filter before returning.
*
* @since 1.0.0
*
* @return array A filtered array of args for the starter_content.
*/
function twenty_twenty_one_get_starter_content() {
// Define and register starter content to showcase the theme on new sites.
$starter_content = array(
// Specify the core-defined pages to create and add custom thumbnails to some of them.
'posts' => array(
'front' => array(
'post_type' => 'page',
'post_title' => esc_html_x( 'Create your website with blocks', 'Theme starter content', 'twentytwentyone' ),
'post_content' => '
<!-- wp:heading {"align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.1"}}} -->
<h2 class="alignwide has-text-align-wide has-gigantic-font-size" style="line-height:1.1">' . esc_html_x( 'Create your website with blocks', 'Theme starter content', 'twentytwentyone' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"is-style-twentytwentyone-columns-overlap"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center is-style-twentytwentyone-columns-overlap"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"full","sizeSlug":"large"} -->
<figure class="wp-block-image alignfull size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks.jpg" alt="' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '"/></figure>
<!-- /wp:image -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:image {"align":"full","sizeSlug":"large","className":"is-style-twentytwentyone-image-frame"} -->
<figure class="wp-block-image alignfull size-large is-style-twentytwentyone-image-frame"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/in-the-bois-de-boulogne.jpg" alt="' . esc_attr__( 'In the Bois de Boulogne, by Berthe Morisot, 1879', 'twentytwentyone' ) . '"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:image {"sizeSlug":"large","className":"alignfull size-full is-style-twentytwentyone-border"} -->
<figure class="wp-block-image size-large alignfull size-full is-style-twentytwentyone-border"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/young-woman-in-mauve.jpg" alt="' . esc_attr__( 'Young Woman in Mauve, by Berthe Morisot, 1880', 'twentytwentyone' ) . '"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>' . esc_html_x( 'Add block patterns', 'Theme starter content', 'twentytwentyone' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html_x( 'Block patterns are pre-designed groups of blocks. To add one, select the Add Block button [+] in the toolbar at the top of the editor. Switch to the Patterns tab underneath the search bar, and choose a pattern.', 'Theme starter content', 'twentytwentyone' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>' . esc_html_x( 'Frame your images', 'Theme starter content', 'twentytwentyone' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html_x( 'Twenty Twenty-One includes stylish borders for your content. With an Image block selected, open the "Styles" panel within the Editor sidebar. Select the "Frame" block style to activate it.', 'Theme starter content', 'twentytwentyone' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading {"level":3} -->
<h3>' . esc_html_x( 'Overlap columns', 'Theme starter content', 'twentytwentyone' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html_x( 'Twenty Twenty-One also includes an overlap style for column blocks. With a Columns block selected, open the "Styles" panel within the Editor sidebar. Choose the "Overlap" block style to try it out.', 'Theme starter content', 'twentytwentyone' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:cover {"overlayColor":"green","contentPosition":"center center","align":"wide","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-cover alignwide has-green-background-color has-background-dim is-style-twentytwentyone-border"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"fontSize":"huge"} -->
<p class="has-huge-font-size">' . esc_html_x( 'Need help?', 'Theme starter content', 'twentytwentyone' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":75} -->
<div style="height:75px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="https://wordpress.org/support/article/twenty-twenty-one/">' . esc_html_x( 'Read the Theme Documentation', 'Theme starter content', 'twentytwentyone' ) . '</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="https://wordpress.org/support/theme/twentytwentyone/">' . esc_html_x( 'Check out the Support Forums', 'Theme starter content', 'twentytwentyone' ) . '</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->',
),
'about',
'contact',
'blog',
),
// Default to a static front page and assign the front and posts pages.
'options' => array(
'show_on_front' => 'page',
'page_on_front' => '{{front}}',
'page_for_posts' => '{{blog}}',
),
// Set up nav menus for each of the two areas registered in the theme.
'nav_menus' => array(
// Assign a menu to the "primary" location.
'primary' => array(
'name' => esc_html__( 'Primary', 'twentytwentyone' ),
'items' => array(
'link_home', // Note that the core "home" page is actually a link in case a static front page is not used.
'page_about',
'page_blog',
'page_contact',
),
),
// Assign a menu to the "footer" location.
'footer' => array(
'name' => esc_html__( 'Footer', 'twentytwentyone' ),
'items' => array(
'link_facebook',
'link_twitter',
'link_instagram',
'link_email',
),
),
),
);
/**
* Filters the array of starter content.
*
* @since 1.0.0
*
* @param array $starter_content Array of starter content.
*/
return apply_filters( 'twenty_twenty_one_starter_content', $starter_content );
}

View File

@ -0,0 +1,474 @@
<?php
/**
* Functions which enhance the theme by hooking into WordPress
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/**
* Remove Gutenberg `Theme` Block Styles.
*
* @since 1.0.0
*/
function twenty_twenty_one_deregister_styles() {
wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_print_styles', 'twenty_twenty_one_deregister_styles', 100 );
/**
* Adds custom classes to the array of body classes.
*
* @since 1.0.0
*
* @param array $classes Classes for the body element.
*
* @return array
*/
function twenty_twenty_one_body_classes( $classes ) {
// Adds `singular` to singular pages, and `hfeed` to all other pages.
$classes[] = is_singular() ? 'singular' : 'hfeed';
// Add a body class if main navigation is active.
if ( has_nav_menu( 'primary' ) ) {
$classes[] = 'has-main-navigation';
}
// Add a body class if there are no footer widgets.
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
$classes[] = 'no-widgets';
}
return $classes;
}
add_filter( 'body_class', 'twenty_twenty_one_body_classes' );
/**
* Adds custom class to the array of posts classes.
*
* @since 1.0.0
*
* @param array $classes An array of CSS classes.
*
* @return array
*/
function twenty_twenty_one_post_classes( $classes ) {
$classes[] = 'entry';
return $classes;
}
add_filter( 'post_class', 'twenty_twenty_one_post_classes', 10, 3 );
/**
* Add a pingback url auto-discovery header for single posts, pages, or attachments.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_pingback_header() {
if ( is_singular() && pings_open() ) {
echo '<link rel="pingback" href="', esc_url( get_bloginfo( 'pingback_url' ) ), '">';
}
}
add_action( 'wp_head', 'twenty_twenty_one_pingback_header' );
/**
* Changes comment form default fields.
*
* @since 1.0.0
*
* @param array $defaults The form defaults.
*
* @return array
*/
function twenty_twenty_one_comment_form_defaults( $defaults ) {
// Adjust height of comment form.
$defaults['comment_field'] = preg_replace( '/rows="\d+"/', 'rows="5"', $defaults['comment_field'] );
return $defaults;
}
add_filter( 'comment_form_defaults', 'twenty_twenty_one_comment_form_defaults' );
/**
* Filters the default archive titles.
*
* @since 1.0.0
*
* @return string
*/
function twenty_twenty_one_get_the_archive_title() {
if ( is_category() ) {
return sprintf(
/* translators: %s: The term title. */
esc_html__( 'Category Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . single_term_title( '', false ) . '</span>'
);
}
if ( is_tag() ) {
return sprintf(
/* translators: %s: The term title. */
esc_html__( 'Tag Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . single_term_title( '', false ) . '</span>'
);
}
if ( is_author() ) {
return sprintf(
/* translators: %s: The author name. */
esc_html__( 'Author Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . get_the_author_meta( 'display_name' ) . '</span>'
);
}
if ( is_year() ) {
return sprintf(
/* translators: %s: The year. */
esc_html__( 'Yearly Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentytwentyone' ) ) . '</span>'
);
}
if ( is_month() ) {
return sprintf(
/* translators: %s: The month. */
esc_html__( 'Monthly Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentytwentyone' ) ) . '</span>'
);
}
if ( is_day() ) {
return sprintf(
/* translators: %s: The day. */
esc_html__( 'Daily Archives: %s', 'twentytwentyone' ),
'<span class="page-description">' . get_the_date() . '</span>'
);
}
if ( is_post_type_archive() ) {
return sprintf(
/* translators: %s: Post type singular name. */
esc_html__( '%s Archives', 'twentytwentyone' ),
get_post_type_object( get_queried_object()->name )->labels->singular_name
);
}
if ( is_tax() ) {
return sprintf(
/* translators: %s: Taxonomy singular name. */
esc_html__( '%s Archives', 'twentytwentyone' ),
get_taxonomy( get_queried_object()->taxonomy )->labels->singular_name
);
}
return esc_html__( 'Archives:', 'twentytwentyone' );
}
add_filter( 'get_the_archive_title', 'twenty_twenty_one_get_the_archive_title' );
/**
* Determines if post thumbnail can be displayed.
*
* @since 1.0.0
*
* @return bool
*/
function twenty_twenty_one_can_show_post_thumbnail() {
return apply_filters(
'twenty_twenty_one_can_show_post_thumbnail',
! post_password_required() && ! is_attachment() && has_post_thumbnail()
);
}
/**
* Returns the size for avatars used in the theme.
*
* @since 1.0.0
*
* @return int
*/
function twenty_twenty_one_get_avatar_size() {
return 60;
}
/**
* Creates continue reading text
*/
function twenty_twenty_one_continue_reading_text() {
$continue_reading = sprintf(
/* translators: %s: Name of current post. */
esc_html__( 'Continue reading %s', 'twentytwentyone' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
);
return $continue_reading;
}
/**
* Create the continue reading link for excerpt.
*/
function twenty_twenty_one_continue_reading_link_excerpt() {
if ( ! is_admin() ) {
return '&hellip; <a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a>';
}
}
// Filter the excerpt more link.
add_filter( 'excerpt_more', 'twenty_twenty_one_continue_reading_link_excerpt' );
/**
* Create the continue reading link.
*/
function twenty_twenty_one_continue_reading_link() {
if ( ! is_admin() ) {
return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
}
}
// Filter the excerpt more link.
add_filter( 'the_content_more_link', 'twenty_twenty_one_continue_reading_link' );
if ( ! function_exists( 'twenty_twenty_one_post_title' ) ) {
/**
* Add a title to posts that are missing titles.
*
* @since 1.0.0
*
* @param string $title The title.
*
* @return string
*/
function twenty_twenty_one_post_title( $title ) {
return '' === $title ? esc_html__( 'Untitled', 'twentytwentyone' ) : $title;
}
}
add_filter( 'the_title', 'twenty_twenty_one_post_title' );
/**
* Gets the SVG code for a given icon.
*
* @since 1.0.0
*
* @param string $group The icon group.
* @param string $icon The icon.
* @param int $size The icon size in pixels.
*
* @return string
*/
function twenty_twenty_one_get_icon_svg( $group, $icon, $size = 24 ) {
return Twenty_Twenty_One_SVG_Icons::get_svg( $group, $icon, $size );
}
/**
* Changes the default navigation arrows to svg icons
*
* @param string $calendar_output The generated HTML of the calendar.
*
* @return string
*/
function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
$calendar_output = str_replace( '&laquo; ', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
$calendar_output = str_replace( ' &raquo;', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
return $calendar_output;
}
add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
/**
* Get custom CSS.
*
* Return CSS for non-latin language, if available, or null
*
* @param string $type Whether to return CSS for the "front-end", "block-editor" or "classic-editor".
*
* @return string
*/
function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
// Fetch site locale.
$locale = get_bloginfo( 'language' );
// Define fallback fonts for non-latin languages.
$font_family = apply_filters(
'twenty_twenty_one_get_localized_font_family_types',
array(
// Arabic.
'ar' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ary' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'azb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ckb' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'fa-IR' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'haz' => array( 'Tahoma', 'Arial', 'sans-serif' ),
'ps' => array( 'Tahoma', 'Arial', 'sans-serif' ),
// Chinese Simplified (China) - Noto Sans SC.
'zh-CN' => array( '\'PingFang SC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Chinese Traditional (Taiwan) - Noto Sans TC.
'zh-TW' => array( '\'PingFang TC\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Chinese (Hong Kong) - Noto Sans HK.
'zh-HK' => array( '\'PingFang HK\'', '\'Helvetica Neue\'', '\'Microsoft YaHei New\'', '\'STHeiti Light\'', 'sans-serif' ),
// Cyrillic.
'bel' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'bg-BG' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'kk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'mk-MK' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'mn' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'ru-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'sah' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'sr-RS' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'tt-RU' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
'uk' => array( '\'Helvetica Neue\'', 'Helvetica', '\'Segoe UI\'', 'Arial', 'sans-serif' ),
// Devanagari.
'bn-BD' => array( 'Arial', 'sans-serif' ),
'hi-IN' => array( 'Arial', 'sans-serif' ),
'mr' => array( 'Arial', 'sans-serif' ),
'ne-NP' => array( 'Arial', 'sans-serif' ),
// Greek.
'el' => array( '\'Helvetica Neue\', Helvetica, Arial, sans-serif' ),
// Gujarati.
'gu' => array( 'Arial', 'sans-serif' ),
// Hebrew.
'he-IL' => array( '\'Arial Hebrew\'', 'Arial', 'sans-serif' ),
// Japanese.
'ja' => array( 'sans-serif' ),
// Korean.
'ko-KR' => array( '\'Apple SD Gothic Neo\'', '\'Malgun Gothic\'', '\'Nanum Gothic\'', 'Dotum', 'sans-serif' ),
// Thai.
'th' => array( '\'Sukhumvit Set\'', '\'Helvetica Neue\'', 'Helvetica', 'Arial', 'sans-serif' ),
// Vietnamese.
'vi' => array( '\'Libre Franklin\'', 'sans-serif' ),
)
);
// Return if the selected language has no fallback fonts.
if ( empty( $font_family[ $locale ] ) ) {
return '';
}
// Define elements to apply fallback fonts to.
$elements = apply_filters(
'twenty_twenty_one_get_localized_font_family_elements',
array(
'front-end' => array( 'body', 'input', 'textarea', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', '.has-drop-cap:not(:focus)::first-letter', '.has-drop-cap:not(:focus)::first-letter', '.entry-content .wp-block-archives', '.entry-content .wp-block-categories', '.entry-content .wp-block-cover-image', '.entry-content .wp-block-latest-comments', '.entry-content .wp-block-latest-posts', '.entry-content .wp-block-pullquote', '.entry-content .wp-block-quote.is-large', '.entry-content .wp-block-quote.is-style-large', '.entry-content .wp-block-archives *', '.entry-content .wp-block-categories *', '.entry-content .wp-block-latest-posts *', '.entry-content .wp-block-latest-comments *', '.entry-content p', '.entry-content ol', '.entry-content ul', '.entry-content dl', '.entry-content dt', '.entry-content cite', '.entry-content figcaption', '.entry-content .wp-caption-text', '.comment-content p', '.comment-content ol', '.comment-content ul', '.comment-content dl', '.comment-content dt', '.comment-content cite', '.comment-content figcaption', '.comment-content .wp-caption-text', '.widget_text p', '.widget_text ol', '.widget_text ul', '.widget_text dl', '.widget_text dt', '.widget-content .rssSummary', '.widget-content cite', '.widget-content figcaption', '.widget-content .wp-caption-text' ),
'block-editor' => array( '.editor-styles-wrapper > *', '.editor-styles-wrapper p', '.editor-styles-wrapper ol', '.editor-styles-wrapper ul', '.editor-styles-wrapper dl', '.editor-styles-wrapper dt', '.editor-post-title__block .editor-post-title__input', '.editor-styles-wrapper .wp-block h1', '.editor-styles-wrapper .wp-block h2', '.editor-styles-wrapper .wp-block h3', '.editor-styles-wrapper .wp-block h4', '.editor-styles-wrapper .wp-block h5', '.editor-styles-wrapper .wp-block h6', '.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter', '.editor-styles-wrapper cite', '.editor-styles-wrapper figcaption', '.editor-styles-wrapper .wp-caption-text' ),
'classic-editor' => array( 'body#tinymce.wp-editor', 'body#tinymce.wp-editor p', 'body#tinymce.wp-editor ol', 'body#tinymce.wp-editor ul', 'body#tinymce.wp-editor dl', 'body#tinymce.wp-editor dt', 'body#tinymce.wp-editor figcaption', 'body#tinymce.wp-editor .wp-caption-text', 'body#tinymce.wp-editor .wp-caption-dd', 'body#tinymce.wp-editor cite', 'body#tinymce.wp-editor table' ),
)
);
// Return if the specified type doesn't exist.
if ( empty( $elements[ $type ] ) ) {
return '';
}
// Include file if function doesn't exist.
if ( ! function_exists( 'twenty_twenty_one_generate_css' ) ) {
require_once get_theme_file_path( 'inc/custom-css.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
}
// Return the specified styles.
return twenty_twenty_one_generate_css(
implode( ',', $elements[ $type ] ),
'font-family',
implode( ',', $font_family[ $locale ] ),
null,
null,
false
);
}
/**
* Print the first instance of a block in the content, and then break away.
*
* @since 1.0.0
*
* @param string $block_name The full block type name, or a partial match.
* Example: `core/image`, `core-embed/*`.
* @param string|null $content The content we need to search in. Use null for get_the_content().
* @param int $instances How many instances of the block we want to print. Defaults to 1.
*
* @return bool Returns true if a block was located & printed, otherwise false.
*/
function twenty_twenty_one_print_first_instance_of_block( $block_name, $content = null, $instances = 1 ) {
$instances_count = 0;
$blocks_content = '';
if ( ! $content ) {
$content = get_the_content();
}
// Parse blocks in the content.
$blocks = parse_blocks( $content );
// Loop blocks.
foreach ( $blocks as $block ) {
// Sanity check.
if ( ! isset( $block['blockName'] ) ) {
continue;
}
// Check if this the block we're looking for.
$is_matching_block = false;
// If the block ends with *, we should just try to match the first portion.
if ( '*' === $block_name[-1] ) {
$is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
} else {
$is_matching_block = $block_name === $block['blockName'];
}
if ( $is_matching_block ) {
// Increment count.
$instances_count++;
// Add the block HTML.
$blocks_content .= render_block( $block );
// Break the loop if we've reached the $instances count.
if ( $instances_count >= $instances ) {
break;
}
}
}
if ( $blocks_content ) {
echo apply_filters( 'the_content', $blocks_content ); // phpcs:ignore WordPress.Security.EscapeOutput
return true;
}
return false;
}
/**
* Retrieve protected post password form content.
*
* @since 1.0.0
*
* @param int|WP_Post $post Optional. Post ID or WP_Post object. Default is global $post.
* @return string HTML content for password form for password protected post.
*/
function twenty_twenty_one_password_form( $post = 0 ) {
$post = get_post( $post );
$label = 'pwbox-' . ( empty( $post->ID ) ? wp_rand() : $post->ID );
$output = '<p class="post-password-message">' . esc_html__( 'This content is password protected. Please enter a password to view.', 'twentytwentyone' ) . '</p>
<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">
<label class="post-password-form__label" for="' . esc_attr( $label ) . '">' . esc_html__( 'Password', 'twentytwentyone' ) . '</label><input class="post-password-form__input" name="post_password" id="' . esc_attr( $label ) . '" type="password" size="20" /><input type="submit" class="post-password-form__submit" name="' . esc_attr__( 'Submit', 'twentytwentyone' ) . '" value="' . esc_attr_x( 'Enter', 'post password form', 'twentytwentyone' ) . '" /></form>
';
return $output;
}
add_filter( 'the_password_form', 'twenty_twenty_one_password_form' );

View File

@ -0,0 +1,234 @@
<?php
/**
* Custom template tags for this theme
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
if ( ! function_exists( 'twenty_twenty_one_posted_on' ) ) {
/**
* Prints HTML with meta information for the current post-date/time.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_posted_on() {
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
$time_string = sprintf(
$time_string,
esc_attr( get_the_date( DATE_W3C ) ),
esc_html( get_the_date() )
);
echo '<span class="posted-on">';
printf(
/* translators: %s: publish date. */
esc_html__( 'Published %s', 'twentytwentyone' ),
$time_string // phpcs:ignore WordPress.Security.EscapeOutput
);
echo '</span>';
}
}
if ( ! function_exists( 'twenty_twenty_one_posted_by' ) ) {
/**
* Prints HTML with meta information about theme author.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_posted_by() {
if ( ! get_the_author_meta( 'description' ) && post_type_supports( get_post_type(), 'author' ) ) {
echo '<span class="byline">';
printf(
/* translators: %s author name. */
esc_html__( 'By %s', 'twentytwentyone' ),
'<a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '" rel="author">' . esc_html( get_the_author() ) . '</a>'
);
echo '</span>';
}
}
}
if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
/**
* Prints HTML with meta information for the categories, tags and comments.
* Footer entry meta is displayed differently in archives and single posts.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_entry_meta_footer() {
// Early exit if not a post.
if ( 'post' !== get_post_type() ) {
return;
}
// Hide meta information on pages.
if ( ! is_single() ) {
$post_format = get_post_format();
if ( 'aside' === $post_format || 'status' === $post_format ) {
echo '<p><a href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></p>'; // phpcs:ignore WordPress.Security.EscapeOutput
}
// Posted on.
twenty_twenty_one_posted_on();
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Name of current post. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span><br>'
);
if ( has_category() || has_tag() ) {
echo '<div class="post-taxonomies">';
/* translators: used between list items, there is a space after the comma. */
$categories_list = get_the_category_list( __( ', ', 'twentytwentyone' ) );
if ( $categories_list ) {
printf(
/* translators: %s: list of categories. */
'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . '. </span>',
$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
/* translators: used between list items, there is a space after the comma. */
$tags_list = get_the_tag_list( '', __( ', ', 'twentytwentyone' ) );
if ( $tags_list ) {
printf(
/* translators: %s: list of tags. */
'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '.</span>',
$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
echo '</div>';
}
} else {
echo '<div class="posted-by">';
// Posted on.
twenty_twenty_one_posted_on();
// Posted by.
twenty_twenty_one_posted_by();
// Edit post link.
edit_post_link(
sprintf(
/* translators: %s: Name of current post. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span>'
);
echo '</div>';
if ( has_category() || has_tag() ) {
echo '<div class="post-taxonomies">';
/* translators: used between list items, there is a space after the comma. */
$categories_list = get_the_category_list( __( ', ', 'twentytwentyone' ) );
if ( $categories_list ) {
printf(
/* translators: %s: list of categories. */
'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
/* translators: used between list items, there is a space after the comma. */
$tags_list = get_the_tag_list( '', __( ', ', 'twentytwentyone' ) );
if ( $tags_list ) {
printf(
/* translators: %s: list of tags. */
'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
);
}
echo '</div>';
}
}
}
}
if ( ! function_exists( 'twenty_twenty_one_post_thumbnail' ) ) {
/**
* Displays an optional post thumbnail.
*
* Wraps the post thumbnail in an anchor element on index views, or a div
* element when on single views.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_post_thumbnail() {
if ( ! twenty_twenty_one_can_show_post_thumbnail() ) {
return;
}
?>
<?php if ( is_singular() ) : ?>
<figure class="post-thumbnail">
<?php
// Thumbnail is loaded eagerly because it's going to be in the viewport immediately.
the_post_thumbnail( 'post-thumbnail', array( 'loading' => 'eager' ) );
?>
</figure><!-- .post-thumbnail -->
<?php else : ?>
<figure class="post-thumbnail">
<a class="post-thumbnail-inner alignwide" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php the_post_thumbnail( 'post-thumbnail' ); ?>
</a>
</figure>
<?php endif; ?>
<?php
}
}
if ( ! function_exists( 'twenty_twenty_one_the_posts_navigation' ) ) {
/**
* Print the next and previous posts navigation.
*
* @since 1.0.0
*
* @return void
*/
function twenty_twenty_one_the_posts_navigation() {
the_posts_pagination(
array(
/* translators: There is a space after page. */
'before_page_number' => esc_html__( 'Page ', 'twentytwentyone' ),
'mid_size' => 0,
'prev_text' => sprintf(
'%s <span class="nav-prev-text">%s</span>',
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ),
esc_html__( 'Newer posts', 'twentytwentyone' )
),
'next_text' => sprintf(
'<span class="nav-next-text">%s</span> %s',
esc_html__( 'Older posts', 'twentytwentyone' ),
is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' )
),
)
);
}
}

View File

@ -0,0 +1,38 @@
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
if ( have_posts() ) {
// Load posts loop.
while ( have_posts() ) {
the_post();
get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
}
// Previous/next page navigation.
twenty_twenty_one_the_posts_navigation();
} else {
// If no content, include the "No posts found" template.
get_template_part( 'template-parts/content/content-none' );
}
get_footer();

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,68 @@
{
"name": "twentytwentyone",
"version": "1.0.0",
"description": "Default WP Theme",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"keywords": [
"WordPress",
"Theme"
],
"bugs": {
"url": "https://github.com/wordpress/twentytwentyone"
},
"homepage": "https://github.com/wordpress/twentytwentyone",
"devDependencies": {
"@wordpress/browserslist-config": "^2.2.2",
"@wordpress/env": "^2.1.0",
"@wordpress/eslint-plugin": "^7.3.0",
"autoprefixer": "^9.5.1",
"chokidar-cli": "^2.1.0",
"eslint": "^7.11.0",
"minimist": "^1.2.2",
"node-sass": "^4.13.1",
"npm-run-all": "^4.1.5",
"postcss-calc": "^7.0.5",
"postcss-cli": "^7.1.0",
"postcss-css-variables": "^0.17.0",
"postcss-custom-media": "^7.0.8",
"postcss-focus-within": "^3.0.0",
"postcss-nested": "^4.2.1",
"rtlcss": "^2.6.1",
"stylelint": "^13.7.2",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-config-wordpress": "^17.0.0"
},
"rtlcssConfig": {
"options": {
"autoRename": false,
"autoRenameStrict": false,
"blacklist": {},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap": []
},
"plugins": [],
"map": false
},
"browserslist": [
"extends @wordpress/browserslist-config"
],
"scripts": {
"start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
"build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:print": "node-sass assets/sass/07-utilities/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
"build:ie": "postcss style.css -o assets/css/ie.css",
"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
"build": "run-s \"build:*\"",
"watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
"lint:scss": "stylelint **/*.scss",
"lint:js": "eslint assets/js",
"lint-fix:scss": "stylelint **/*.scss --fix",
"lint-fix:js": "eslint assets/js --fix",
"wp-env": "wp-env"
}
}

View File

@ -0,0 +1,25 @@
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
/* Start the Loop */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content/content-page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile; // End of the loop.
get_footer();

View File

@ -0,0 +1,88 @@
=== Twenty Twenty-One ===
Contributors: wordpressdotorg
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
== Description ==
Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush.
With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this themes soft colors and eye-catching — yet timeless — design will let your work shine.
Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
== Installation ==
1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
2. Type in Twenty Twenty-One in the search form and press the 'Enter' key on your keyboard.
3. Click on the 'Activate' button to use your new theme right away.
4. Go to INSERT ABOUT PAGE for a guide on how to customize this theme.
5. Navigate to Appearance > Customize in your admin panel and customize to taste.
== Changelog ==
== Copyright ==
Twenty Twenty-One WordPress Theme, 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
Twenty Twenty-One is derived from Seedlet, (C) 2020 Automattic, Inc.
Twenty Twenty-One is also based on:
Twenty Nineteen. 2018-2020 WordPress.org
Twenty Nineteen is distributed under the terms of the GNU GPL v2 or later.
Twenty Seventeen. Copyright (C) 2016-2020 WordPress.org
Twenty Seventeen is distributed under the terms of the GNU GPL v2 or later.
Twenty Sixteen. Copyright (C) 2015-2020 WordPress.org
Twenty Sixteen is distributed under the terms of the GNU GPL v2 or later.
Twenty Twenty. Copyright (C) 2020 WordPress.org
Twenty Twenty is distributed under the terms of the GNU GPL v2 or later.
Underscores https://underscores.me/, Copyright (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
Unless otherwise noted, the icons in this theme are derived from the WordPress
Icons Library, licensed under the terms of the GNU GPL v2 or later.
https://github.com/WordPress/gutenberg/tree/master/packages/icons
This theme bundles the following third-party resources:
input[type='checkbox'], input[type='radio'], input[type='ranged'],
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
https://codepen.io/aaroniker/pen/ZEYoxEY Copyright (c) 2020 Aaron Iker
https://codepen.io/chriscoyier/pen/FtnAa Copyright (c) 2020 Chris Coyier
License: MIT.
Images
Art by Berthe Morisot 1841-1895. Public domain.
https://www.wikiart.org/en/berthe-morisot/playing-in-the-sand
https://www.wikiart.org/en/berthe-morisot/roses-tremieres-hollyhocks-1884
https://www.wikiart.org/en/berthe-morisot/young-woman-in-mauve
https://www.wikiart.org/en/berthe-morisot/in-the-bois-de-boulogne
https://www.wikiart.org/en/berthe-morisot/daffodils
https://www.wikiart.org/en/berthe-morisot/self-portrait-1885
https://www.wikiart.org/en/berthe-morisot/the-garden-at-bougival-1884
https://www.wikiart.org/en/berthe-morisot/villa-with-orange-trees-nice
https://www.wikiart.org/en/berthe-morisot/reading

View File

@ -0,0 +1,65 @@
<?php
/**
* The template for displaying search results pages
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
if ( have_posts() ) {
?>
<header class="page-header alignwide">
<h1 class="page-title">
<?php
printf(
/* translators: %s: search term. */
esc_html__( 'Results for "%s"', 'twentytwentyone' ),
'<span class="page-description search-term">' . esc_html( get_search_query() ) . '</span>'
);
?>
</h1>
</header><!-- .page-header -->
<div class="search-result-count default-max-width">
<?php
printf(
esc_html(
/* translators: %d: the number of search results. */
_n(
'We found %d result for your search.',
'We found %d results for your search.',
(int) $wp_query->found_posts,
'twentytwentyone'
)
),
(int) $wp_query->found_posts
);
?>
</div><!-- .search-result-count -->
<?php
// Start the Loop.
while ( have_posts() ) {
the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content/content-excerpt', get_post_format() );
} // End the loop.
// Previous/next page navigation.
twenty_twenty_one_the_posts_navigation();
// If no content, include the "No posts found" template.
} else {
get_template_part( 'template-parts/content/content-none' );
}
get_footer();

View File

@ -0,0 +1,27 @@
<?php
/**
* The searchform.php template.
*
* Used any time that get_search_form() is called.
*
* @link https://developer.wordpress.org/reference/functions/wp_unique_id/
* @link https://developer.wordpress.org/reference/functions/get_search_form/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
/*
* Generate a unique ID for each form and a string containing an aria-label
* if one was passed to get_search_form() in the args array.
*/
$twentytwentyone_unique_id = wp_unique_id( 'search-form-' );
$twentytwentyone_aria_label = ! empty( $args['label'] ) ? 'aria-label="' . esc_attr( $args['label'] ) . '"' : '';
?>
<form role="search" <?php echo $twentytwentyone_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>"><?php _e( 'Search&hellip;', 'twentytwentyone' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
<input type="search" id="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>" class="search-field" value="<?php echo get_search_query(); ?>" name="s" />
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwentyone' ); ?>" />
</form>

View File

@ -0,0 +1,49 @@
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
get_header();
/* Start the Loop */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content/content-single' );
if ( is_singular( 'attachment' ) ) {
// Parent post navigation.
the_post_navigation(
array(
/* translators: %s: parent post link. */
'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentytwentyone' ), '%title' ),
)
);
}
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
if ( is_singular( 'post' ) ) {
// Previous/next post navigation.
$twentytwentyone_next = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' );
$twentytwentyone_prev = is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' );
the_post_navigation(
array(
'next_text' => '<p class="meta-nav">' . esc_html__( 'Next Post', 'twentytwentyone' ) . $twentytwentyone_next . '</p><p class="post-title">%title</p>',
'prev_text' => '<p class="meta-nav">' . $twentytwentyone_prev . esc_html__( 'Previous Post', 'twentytwentyone' ) . '</p><p class="post-title">%title</p>',
)
);
}
endwhile; // End of the loop.
get_footer();

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,25 @@
<?php
/**
* Template part for displaying post archives and search results
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php get_template_part( 'template-parts/header/excerpt-header', get_post_format() ); ?>
<div class="entry-content">
<?php get_template_part( 'template-parts/excerpt/excerpt', get_post_format() ); ?>
</div><!-- .entry-content -->
<footer class="entry-footer default-max-width">
<?php twenty_twenty_one_entry_meta_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-${ID} -->

View File

@ -0,0 +1,66 @@
<?php
/**
* Template part for displaying a message that posts cannot be found
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<section class="no-results not-found">
<header class="page-header alignwide">
<?php if ( is_search() ) : ?>
<h1 class="page-title">
<?php
printf(
/* translators: %s: search term. */
esc_html__( 'Results for "%s"', 'twentytwentyone' ),
'<span class="page-description search-term">' . esc_html( get_search_query() ) . '</span>'
);
?>
</h1>
<?php else : ?>
<h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'twentytwentyone' ); ?></h1>
<?php endif; ?>
</header><!-- .page-header -->
<div class="page-content default-max-width">
<?php if ( is_home() && current_user_can( 'publish_posts' ) ) : ?>
<?php
printf(
'<p>' . wp_kses(
/* translators: 1: link to WP admin new post page. */
__( 'Ready to publish your first post? <a href="%1$s">Get started here</a>.', 'twentytwentyone' ),
array(
'a' => array(
'href' => array(),
),
)
) . '</p>',
esc_url( admin_url( 'post-new.php' ) )
);
?>
<?php elseif ( is_search() ) : ?>
<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'twentytwentyone' ); ?></p>
<?php get_search_form(); ?>
<?php else : ?>
<p><?php esc_html_e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'twentytwentyone' ); ?></p>
<?php get_search_form(); ?>
<?php endif; ?>
</div><!-- .page-content -->
</section><!-- .no-results -->

View File

@ -0,0 +1,57 @@
<?php
/**
* Template part for displaying page content in page.php
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( ! is_front_page() ) : ?>
<header class="entry-header alignwide">
<?php get_template_part( 'template-parts/header/entry-header' ); ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header>
<?php elseif ( has_post_thumbnail() ) : ?>
<header class="entry-header alignwide">
<?php twenty_twenty_one_post_thumbnail(); ?>
</header>
<?php endif; ?>
<div class="entry-content">
<?php
the_content();
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
'after' => '</nav>',
/* translators: There is a space after page. */
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
)
);
?>
</div><!-- .entry-content -->
<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer default-max-width">
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post. Only visible to screen readers. */
esc_html__( 'Edit %s', 'twentytwentyone' ),
'<span class="screen-reader-text">' . get_the_title() . '</span>'
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
<?php endif; ?>
</article><!-- #post-<?php the_ID(); ?> -->

View File

@ -0,0 +1,44 @@
<?php
/**
* Template part for displaying posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header alignwide">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header>
<div class="entry-content">
<?php
the_content();
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
'after' => '</nav>',
/* translators: There is a space after page. */
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer default-max-width">
<?php twenty_twenty_one_entry_meta_footer(); ?>
</footer><!-- .entry-footer -->
<?php if ( ! is_singular( 'attachment' ) ) : ?>
<?php get_template_part( 'template-parts/post/author-bio' ); ?>
<?php endif; ?>
</article><!-- #post-${ID} -->

View File

@ -0,0 +1,49 @@
<?php
/**
* Template part for displaying posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( is_singular() ) : ?>
<?php the_title( '<h1 class="entry-title default-max-width">', '</h1>' ); ?>
<?php else : ?>
<?php the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
<?php endif; ?>
<?php twenty_twenty_one_post_thumbnail(); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php
the_content(
sprintf(
twenty_twenty_one_continue_reading_text(),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
'after' => '</nav>',
/* translators: There is a space after page. */
'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer default-max-width">
<?php twenty_twenty_one_entry_meta_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-${ID} -->

View File

@ -0,0 +1,13 @@
<?php
/**
* Show the appropriate content for the Aside post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// Print the full content.
the_content();

View File

@ -0,0 +1,23 @@
<?php
/**
* Show the appropriate content for the Audio post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
$content = get_the_content();
if ( has_block( 'core/audio', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/audio', $content );
} elseif ( has_block( 'core/embed', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/embed', $content );
} else {
twenty_twenty_one_print_first_instance_of_block( 'core-embed/*', $content );
}
// Add the excerpt.
the_excerpt();

View File

@ -0,0 +1,20 @@
<?php
/**
* Show the appropriate content for the Chat post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// If there are paragraph blocks, print up to two.
// Otherwise this is legacy content, and we can post the excerpt.
if ( has_block( 'core/paragraph', get_the_content() ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content(), 2 );
} else {
the_excerpt();
}

View File

@ -0,0 +1,18 @@
<?php
/**
* Show the appropriate content for the Gallery post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// Print the 1st gallery we can find.
if ( has_block( 'core/gallery', get_the_content() ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/gallery', get_the_content() );
}
the_excerpt();

View File

@ -0,0 +1,21 @@
<?php
/**
* Show the appropriate content for the Image post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// If there is no featured-image, print the first image block we can find.
if (
! twenty_twenty_one_can_show_post_thumbnail() &&
has_block( 'core/image', get_the_content() )
) {
twenty_twenty_one_print_first_instance_of_block( 'core/image', get_the_content() );
}
the_excerpt();

View File

@ -0,0 +1,19 @@
<?php
/**
* Show the appropriate content for the Link post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// Print the 1st instance of a paragraph block. If none is found, print the content.
if ( has_block( 'core/paragraph', get_the_content() ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content() );
} else {
the_content();
}

View File

@ -0,0 +1,21 @@
<?php
/**
* Show the appropriate content for the Quote post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
$content = get_the_content();
// If there is no quote or pullquote print the content.
if ( has_block( 'core/quote', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/quote', $content );
} elseif ( has_block( 'core/pullquote', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/pullquote', $content );
} else {
the_excerpt();
}

View File

@ -0,0 +1,13 @@
<?php
/**
* Show the appropriate content for the Status post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// Print the full content.
the_content();

View File

@ -0,0 +1,23 @@
<?php
/**
* Show the appropriate content for the Video post format.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
$content = get_the_content();
if ( has_block( 'core/video', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/video', $content );
} elseif ( has_block( 'core/embed', $content ) ) {
twenty_twenty_one_print_first_instance_of_block( 'core/embed', $content );
} else {
twenty_twenty_one_print_first_instance_of_block( 'core-embed/*', $content );
}
// Add the excerpt.
the_excerpt();

View File

@ -0,0 +1,12 @@
<?php
/**
* Show the excerpt.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
the_excerpt();

View File

@ -0,0 +1,16 @@
<?php
/**
* Displays the footer widget area.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- .widget-area -->
<?php endif; ?>

View File

@ -0,0 +1,10 @@
<?php
/**
* Displays the post header
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
the_title( '<h1 class="entry-title">', '</h1>' );

View File

@ -0,0 +1,22 @@
<?php
/**
* Displays the post header
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
// Don't show the title if the post-format is `aside` or `status`.
$post_format = get_post_format();
if ( 'aside' === $post_format || 'status' === $post_format ) {
return;
}
?>
<header class="entry-header">
<?php
the_title( sprintf( '<h2 class="entry-title default-max-width"><a href="%s">', esc_url( get_permalink() ) ), '</a></h2>' );
twenty_twenty_one_post_thumbnail();
?>
</header><!-- .entry-header -->

View File

@ -0,0 +1,42 @@
<?php
/**
* Displays header site branding
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
$blog_info = get_bloginfo( 'name' );
$description = get_bloginfo( 'description', 'display' );
$show_title = ( true === get_theme_mod( 'display_title_and_tagline', true ) );
$header_class = $show_title ? 'site-title' : 'screen-reader-text';
?>
<?php if ( has_custom_logo() && $show_title ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<div class="site-branding">
<?php if ( has_custom_logo() && ! $show_title ) : ?>
<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<?php if ( $blog_info ) : ?>
<?php if ( is_front_page() && ! is_paged() ) : ?>
<h1 class="<?php echo esc_attr( $header_class ); ?>"><?php echo esc_html( $blog_info ); ?></h1>
<?php elseif ( is_front_page() || is_home() ) : ?>
<h1 class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( $blog_info ); ?></a></h1>
<?php else : ?>
<p class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( $blog_info ); ?></a></p>
<?php endif; ?>
<?php endif; ?>
<?php if ( $description && get_theme_mod( 'display_title_and_tagline', true ) === true ) : ?>
<p class="site-description">
<?php echo $description; // phpcs:ignore WordPress.Security.EscapeOutput ?>
</p>
<?php endif; ?>
</div><!-- .site-branding -->

View File

@ -0,0 +1,46 @@
<?php
/**
* Displays the site header.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
$has_primary_nav = has_nav_menu( 'primary' );
$wrapper_classes = 'site-header';
$wrapper_classes .= has_custom_logo() ? ' has-logo' : '';
$wrapper_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : '';
$wrapper_classes .= $has_primary_nav ? ' has-menu' : '';
?>
<header id="masthead" class="<?php echo esc_attr( $wrapper_classes ); ?>" role="banner">
<?php get_template_part( 'template-parts/header/site-branding' ); ?>
<?php if ( $has_primary_nav ) : ?>
<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
<div class="menu-button-container">
<button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
<span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
</span>
<span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
</span>
</button><!-- #primary-mobile-menu -->
</div><!-- .menu-button-container -->
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_class' => 'menu-wrapper',
'container_class' => 'primary-menu-container',
'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
)
);
?>
</nav><!-- #site-navigation -->
<?php endif; ?>
</header><!-- #masthead -->

View File

@ -0,0 +1,27 @@
<?php
/**
* The template for displaying author info below posts.
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since 1.0.0
*/
?>
<?php if ( (bool) get_the_author_meta( 'description' ) && post_type_supports( get_post_type(), 'author' ) ) : ?>
<div class="author-bio <?php echo get_option( 'show_avatars' ) ? 'show-avatars' : ''; ?>">
<?php echo get_avatar( get_the_author_meta( 'ID' ), '85' ); ?>
<div class="author-bio-content">
<h2 class="author-title"><?php printf( /* translators: 1: Author name. */ esc_html__( 'By %s', 'twentytwentyone' ), get_the_author() ); ?></h2>
<p class="author-description"> <?php the_author_meta( 'description' ); ?></p><!-- .author-description -->
<?php
printf(
/* translators: 1: Link to authors posts. 2: Author name. */
'<a class="author-link" href="%1$s" rel="author">' . esc_html__( 'View all of %2$s\'s posts.', 'twentytwentyone' ) . '</a>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
get_the_author()
);
?>
</div><!-- .author-bio-content -->
</div><!-- .author-bio -->
<?php endif; ?>