😁[LARAVELWORDPRESS] Cách sử dụng Composer, Laravel Mix với Wordpress latest.zip (ok)
https://drive.google.com/file/d/11_7gp6gYdPdSR9EHhXx_0zyJSz63v-ap/view?usp=sharing
[LARAVELWORDPRESS] Cách sử dụng Composer, Laravel Mix với Wordpress latest.zip
$ cd corcel
$ curl -O https://wordpress.org/latest.zip
$ unzip -q latest.zip
$ mv wordpress admin
$ rm -f latest.zipDựa trên 2 bài viết này https://viblo.asia/p/cach-su-dung-composer-laravel-mix-voi-wordpress-3P0lPGM4Zox https://github.com/gumbo-millennium/wordpress-theme
C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\functions.php
<?php
declare (strict_types = 1);
/**
* Gumbo Millennium Theme
* Basic registration of methods
*
* @package Gumbo
* @subpackage Theme
* @since 1.0
* @license MPL-2
* @author Roelof Roos <github@roelof.io>
*/
namespace Gumbo\Theme;
/**
* Registers the theme's configuration with WordPress
*/
class Functions {
public function __construct() {
$wp_version = $GLOBALS['wp_version'] ?? null;
// Check version
if (empty($wp_version) || version_compare($wp_version ?? null, '4.9') < 0) {
wp_die(sprintf(
'Gumbo Millennium requires WordPress 4.9 or newer. You\'ve got %s',
$wp_version ?? 'null'
), 'Outdated WordPress version');
return;
}
// Hook up class
add_action('after_setup_theme', \Closure::fromCallable([$this, 'setup']));
add_action('wp_resource_hints', \Closure::fromCallable([$this, 'resourceHints']), 10, 2);
add_action('widgets_init', \Closure::fromCallable([$this, 'widgetsInit']));
add_action('admin_enqueue_scripts', \Closure::fromCallable([$this, 'loadScripts']));
}
/**
* Called when the theme is set up
*
* @return void
*/
protected function setup(): void{
//Enable post thumbnails for posts and pages, also used in covers
add_theme_support('post-thumbnails');
// Default page thumbnails, shown in the following sizes:
// xs - sm: 50% (max 288px)
// md - lg: 33% (max 330px)
// xl: 25% (max 300px)
set_post_thumbnail_size(330, 200, true);
// Page covers (behind backgrounds) are 1920 x 500 (cropped)
add_image_size('page-cover', 1920, 500, true);
// Large page covers (behind backgrounds) are 1920 x 900 (cropped)
add_image_size('page-cover-large', 1920, 900, true);
// Register the navigation menus
register_nav_menus([
'header' => 'Header',
'footer' => 'Footer',
'footer-legal' => 'Legal',
]);
// Let WordPress know we want valid HTML5, not that weird HTML4 shit
add_theme_support('html5', [
'comment-form',
'comment-list',
'gallery',
'caption',
]);
// Register some post formats
add_theme_support('post-formats', [
'image',
'video',
'gallery',
]);
// Register the theme style for the WordPress editor
add_editor_style(['dist/editor-style.css']);
}
/**
* Add preconnect for Google Fonts.
*
* @since Twenty Seventeen 1.0
*
* @param array $urls URLs to print for resource hints.
* @param string $relation_type The relation type the URLs are printed.
* @return array $urls URLs to print for resource hints.
*/
public function resourceHints(array $urls, string $relation_type): array
{
if ($relation_type === 'preconnect') {
array_push($urls, [
'href' => 'https://fonts.gstatic.com',
'crossorigin',
]);
}
return $urls;
}
/**
* Register widget areas
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
* @return void
*/
protected function widgetsInit(): void{
$defaultWidget = [
'before_widget' => '<section id="%1$s" class="sidebar sidebar--widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="sidebar__title">',
'after_title' => '</h2>',
];
/*
* Bunch of sidebars
*/
// Blog / News sidebar
register_sidebar(array_merge($defaultWidget, [
'name' => 'Nieuws Sidebar',
'id' => 'sidebar-blog',
'description' => 'Add widgets here to appear in your sidebar on blog posts and archive pages.',
]));
// Activity sidebar
register_sidebar(array_merge($defaultWidget, [
'name' => 'Activiteiten Sidebar',
'id' => 'sidebar-activities',
'description' => 'Add widgets here to appear in your sidebar on activities.',
]));
// File system sitebar
register_sidebar(array_merge($defaultWidget, [
'name' => 'Documentensysteem Sidebar',
'id' => 'sidebar-files',
'description' => 'Add widgets here to appear in your sidebar on files and file search.',
]));
}
/**
* Registers admin scripts and css
*
* @return void
*/
protected function loadScripts(): void{
wp_enqueue_style('gumbo-theme-admin-css', get_template_directory_uri() . '/dist/admin.css');
wp_enqueue_script('gumbo-theme-admin-js', get_template_directory_uri() . '/dist/admin.js', ['jquery']);
}
}
// Create class
$gumbo_functions = new Functions;
C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\package.json
{
"name": "@gumbomillennium/theme",
"version": "1.0.0",
"description": "Gumbo Millennium WordPress Theme",
"repository": "git@gitlab.com:gumbo-millennium/wordpress-theme.git",
"contributors": [
{
"name": "Roelof Roos",
"email": "github@roelof.io",
"url": "https://github.com/roelofr"
}
],
"license": "MPL-2.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"stylelint": {
"extends": "stylelint-config-recommended-scss",
"plugins": [
"stylelint-order"
],
"ignoreFiles": [
"node_modules/*",
"bower_components/*",
"vendor/*"
],
"rules": {
"selector-max-id": 0,
"value-no-vendor-prefix": true,
"property-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"media-feature-name-no-vendor-prefix": true,
"at-rule-no-vendor-prefix": true,
"font-weight-notation": "named-where-possible",
"color-hex-case": "lower",
"color-hex-length": "short",
"length-zero-no-unit": true,
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-after": "always-single-line",
"block-closing-brace-newline-before": "always-multi-line",
"block-closing-brace-space-before": "always-single-line",
"block-opening-brace-space-before": "always",
"block-closing-brace-newline-after": "always",
"no-missing-end-of-source-newline": true,
"max-empty-lines": 1,
"rule-empty-line-before": [
"always-multi-line",
{
"except": [
"after-single-line-comment",
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always",
"at-rule-empty-line-before": [
"always",
{
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": [
"after-comment"
]
}
],
"declaration-block-semicolon-newline-after": "always-multi-line",
"no-eol-whitespace": true,
"indentation": 2,
"unit-whitelist": [
[
"%",
"deg",
"ms",
"px",
"rem",
"s",
"vh",
"vmax",
"vmin",
"vw"
],
{
"ignoreProperties": {
"em": [
"/^padding/",
"/^margin/"
]
}
}
],
"no-descending-specificity": null,
"order/order": [
"declarations",
"rules"
],
"order/properties-order": [
[
"display",
"visibility",
"opacity",
{
"properties": [
"position",
"top",
"right",
"bottom",
"left"
],
"emptyLineBefore": "never"
},
{
"properties": [
"order",
"flex",
"flex-flow",
"flex-direction",
"flex-wrap",
"flex-grow",
"flex-shrink",
"flex-basis",
"align-content",
"align-items",
"align-self",
"justify-content",
"place-content"
],
"emptyLineBefore": "never"
},
{
"properties": [
"width",
"height",
"min-width",
"min-height",
"max-width",
"max-height"
],
"emptyLineBefore": "never"
},
{
"properties": [
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
],
"emptyLineBefore": "never"
},
{
"properties": [
"border",
"border-width",
"border-color",
"border-style",
"border-radius",
"border-top",
"border-right",
"border-bottom",
"border-left",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-top-radius",
"border-right-radius",
"border-bottom-radius",
"border-left-radius"
],
"emptyLineBefore": "never"
},
{
"properties": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-position",
"background-clip",
"background-size",
"background-attachment"
],
"emptyLineBefore": "never"
},
{
"properties": [
"color",
"text-align",
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant"
],
"emptyLineBefore": "never"
},
{
"properties": [
"word-break",
"word-wrap",
"word-spacing"
],
"emptyLineBefore": "never"
},
{
"properties": [
"transform"
],
"emptyLineBefore": "never"
},
{
"properties": [
"transition",
"transition-property",
"transition-duration",
"transition-delay",
"transition-timing-function"
],
"emptyLineBefore": "never"
},
{
"properties": [
"animation",
"animation-name",
"animation-duration",
"animation-delay",
"animation-direction",
"animation-fill-mode",
"animation-iteration-count",
"animation-play-state",
"animation-timing-function"
],
"emptyLineBefore": "never"
},
{
"properties": [
"word-break",
"word-wrap",
"word-spacing"
],
"emptyLineBefore": "never"
}
],
{
"unspecified": "bottomAlphabetical"
}
]
}
},
"devDependencies": {
"bootstrap": "^5.2.1",
"cross-env": "^7.0.3",
"debounce": "^1.2.1",
"eslint": "^8.24.0",
"eslint-config-standard": "^17.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-standard": "^5.0.0",
"laravel-mix": "^6.0.49",
"resolve-url-loader": "5.0.0",
"sass": "^1.55.0",
"sass-loader": "^12.1.0",
"stylelint": "^14.13.0",
"stylelint-config-recommended-scss": "^7.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.3.0",
"stylelint-webpack-plugin": "^3.3.0",
"text-transform-loader": "^2.0.0"
}
}C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\webpack.mix.js
const mix = require('laravel-mix')
const StyleLintPlugin = require('stylelint-webpack-plugin')
// Configure javascript
mix.js('assets/js/admin.js', 'dist/admin.js')
// Configure SCSS for admin panel and WordPress
mix
.sass('assets/scss/admin.scss', 'dist/admin.css')
.sass('assets/scss/editor.scss', 'dist/editor.css')
.sass('assets/scss/theme.scss', './style.css')
// Add source maps if not in production
if (!mix.inProduction()) {
mix.sourceMaps()
}
// Linters
mix.webpackConfig({
module: {
rules: [
{
enforce: 'pre',
test: /assets\/js\/.+\.js$/,
loader: 'eslint-loader',
options: {
cache: true
}
},
{
test: /\.(s?css|js)$/,
use: {
loader: 'text-transform-loader',
options: {
prependText: [
'/**!',
'Theme Name: Gumbo Millennium',
'Theme URI: https://www.gumbo-millennium.nl/',
'Author: Digitale Commissie',
'Author URI: https://www.gumbo-millennium.nl/commissions/dc',
'Version: 1.0',
'License: Mozilla Public License v2.0',
'License URI: https://www.mozilla.org/en-US/MPL/2.0/',
'Tags: custom-made, corcel-integration, gumbo-millennium, mpl-2, private-use, non-commercial, financed-by-DUO',
'',
[
'Description:',
'Het thema voor de Gumbo Millennium website. Dit thema levert de vereiste menu\'s',
'en widgets aan voor integratie met Corcel en de front-end website. Dit thema bevat ',
'geen daadwerkelijk thema en zal een foutmelding tonen indien de website verkeerd is',
'geconfigureerd.'
].join(' '),
'*/'
].join('\n')
}
}
}
]
},
plugins: [
new StyleLintPlugin({
files: [
'assets/scss/**/*.s?(a|c)ss'
]
})
]
})C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\css\editor-style.css
/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Media Elements
* 8.0 - RTL
*/
/**
* 1.0 - Body
*/
body {
background-color: #fff;
color: #333;
margin: 20px 40px;
max-width: 580px;
}
/**
* 2.0 - Typography
*/
body,
button,
input,
select,
textarea {
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 400;
line-height: 1.66;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
line-height: 1.4;
margin: 0 0 0.75em;
padding: 1.5em 0 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
padding-top: 0;
}
h1 {
font-size: 24px;
font-size: 1.5rem;
font-weight: 300;
}
h2 {
color: #666;
font-size: 20px;
font-size: 1.25rem;
font-weight: 300;
}
h3 {
color: #333;
font-size: 18px;
font-size: 1.125rem;
font-weight: 300;
}
h4 {
color: #333;
font-size: 16px;
font-size: 1rem;
font-weight: 800;
}
h5 {
color: #767676;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
h6 {
color: #333;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 800;
}
p {
margin: 0 0 1.5em;
padding: 0;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
color: #666;
font-size: 18px;
font-size: 1.125rem;
font-style: italic;
line-height: 1.7;
margin: 0;
overflow: hidden;
padding: 0;
}
blockquote.alignleft,
blockquote.alignright {
font-size: 14px;
font-size: 0.875rem;
width: 34%;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #eee;
text-decoration: none;
}
big {
font-size: 125%;
}
blockquote,
q {
quotes: "" "";
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
/* Typography for Thai Font */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6 {
letter-spacing: 0;
line-height: 1.65;
}
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
line-height: 1.8;
}
/**
* 3.0 - Elements
*/
hr {
background-color: #bbb;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em;
padding: 0;
}
ul {
list-style: disc;
}
ol {
counter-reset: item;
}
ol li {
display: block;
position: relative;
}
ol li:before {
content: counter(item);
counter-increment: item;
font-weight: 800;
left: -1.5em;
position: absolute;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: 700;
}
dd {
margin: 0 1.5em 1.5em;
}
table {
border-collapse: collapse;
margin: 0 0 1.5em;
width: 100%;
}
thead th {
border-bottom: 2px solid #bbb;
padding-bottom: 0.5em;
}
th {
padding: 0.4em;
text-align: left;
}
tr {
border-bottom: 1px solid #eee;
}
td {
padding: 0.4em;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
a {
-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
color: #222;
text-decoration: none;
-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:focus {
color: #000;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}
/* Fixes linked images */
a img {
background: #fff;
-webkit-box-shadow: 0 0 0 6px #fff;
box-shadow: 0 0 0 6px #fff;
}
/**
* 4.0 - Alignment
*/
img {
height: auto; /* Make sure images are scaled correctly. */
width: inherit; /* Make images fill their parent's space. Solves IE8. */
max-width: 100%; /* Adhere to container width. */
}
embed,
iframe,
object {
margin-bottom: 1.5em;
max-width: 100%;
}
/**
* 5.0 - Caption
*/
.wp-caption {
color: #666;
font-size: 13px;
font-size: 0.8125rem;
font-style: italic;
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
margin: 0.8075em 0;
}
/**
* 6.0 - Galleries
*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
-webkit-box-shadow: none;
box-shadow: none;
background: none;
display: inline-block;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/**
* 7.0 - Media Elements
*/
.mejs-container {
margin-bottom: 1.5em;
}
/* Audio Player */
.mejs-controls a.mejs-horizontal-volume-slider,
.mejs-controls a.mejs-horizontal-volume-slider:focus,
.mejs-controls a.mejs-horizontal-volume-slider:hover {
background: transparent;
border: 0;
}
/* Playlist Color Overrides: Light */
.wp-playlist-light {
border-color: #eee;
color: #222;
}
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album {
color: #333;
}
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist {
color: #767676;
}
.wp-playlist-light .wp-playlist-item {
border-bottom: 1px dotted #eee;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}
.wp-playlist-light .wp-playlist-item:hover,
.wp-playlist-light .wp-playlist-item:focus {
border-bottom-color: rgba(0, 0, 0, 0);
background-color: #767676;
color: #fff;
}
.wp-playlist-light a.wp-playlist-caption:hover,
.wp-playlist-light .wp-playlist-item:hover a,
.wp-playlist-light .wp-playlist-item:focus a {
color: #fff;
}
/* Playlist Color Overrides: Dark */
.wp-playlist-dark {
background: #222;
border-color: #333;
}
.wp-playlist-dark .mejs-container .mejs-controls {
background-color: #333;
}
.wp-playlist-dark .wp-playlist-caption {
color: #fff;
}
.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album {
color: #eee;
}
.wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist {
color: #aaa;
}
.wp-playlist-dark .wp-playlist-playing {
background-color: #333;
}
.wp-playlist-dark .wp-playlist-item {
border-bottom: 1px dotted #555;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}
.wp-playlist-dark .wp-playlist-item:hover,
.wp-playlist-dark .wp-playlist-item:focus {
border-bottom-color: rgba(0, 0, 0, 0);
background-color: #aaa;
color: #222;
}
.wp-playlist-dark a.wp-playlist-caption:hover,
.wp-playlist-dark .wp-playlist-item:hover a,
.wp-playlist-dark .wp-playlist-item:focus a {
color: #222;
}
/* Playlist Style Overrides */
.wp-playlist {
padding: 0.625em 0.625em 0.3125em;
}
.wp-playlist-current-item .wp-playlist-item-title {
font-weight: 700;
}
.wp-playlist-current-item .wp-playlist-item-album {
font-style: normal;
}
.wp-playlist-current-item .wp-playlist-item-artist {
font-size: 10px;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.1818em;
text-transform: uppercase;
}
.wp-playlist-item {
padding: 0 0.3125em;
cursor: pointer;
}
.wp-playlist-item:last-of-type {
border-bottom: none;
}
.wp-playlist-item a {
padding: 0.3125em 0;
border-bottom: none;
}
.wp-playlist-item a,
.wp-playlist-item a:focus,
.wp-playlist-item a:hover {
-webkit-box-shadow: none;
box-shadow: none;
background: transparent;
}
.wp-playlist-item-length {
top: 5px;
}C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\js\admin.js
/**
* Theme handler in Admin Panel
*
* @author Roelof Roos <github@roelof.io>
* @license MPL-2.0
*/
import MenuEditor from './admin/menu-editor'
window.jQuery(document).ready(() => {
MenuEditor()
})C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\js\admin\menu-editor.js
/**
* Handles the menu editor's changes. Shows a warning when the menus are nesting too deeply.
*
* @author Roelof Roos <github@roelof.io>
* @license MPL-2.0
*/
import debounce from 'debounce'
// Constant grouped stuff
const selectors = {
menuEditor: '#menu-to-edit',
deepMenu: '.menu-item-depth-',
locationCheckboxes: '.menu-theme-locations input'
}
const menuNames = [
['header', 2],
['footer', 1],
['footer-legal', 1]
]
const passiveEvent = {
passive: true,
capture: false
}
const events = {
menu: ['drop', 'dragend', 'mouseup', 'touchend'],
document: ['menu-item-added', 'menu-removing-item']
}
let currentMaxDepth = 99
/**
* Updates the style of the menu editor if there are invalid nodes
*/
const updateBodyStyle = () => {
if (currentMaxDepth === 99) {
return
}
// Find the menu, again
let menu = document.querySelector(selectors.menuEditor)
let selector = selectors.deepMenu + currentMaxDepth
// Enable or disable the class
menu.classList.toggle('menu--has-overflow', menu.querySelector(selector) !== null)
}
/**
* Binds to any possible drag, drop or change event
*/
const bindMenuListener = () => {
// Listen to DOM changes
let menu = document.querySelector(selectors.menuEditor)
let callback = debounce(updateBodyStyle, 50)
events.menu.forEach(event => {
menu.addEventListener(event, callback, passiveEvent)
})
events.document.forEach(event => {
document.addEventListener(event, callback, passiveEvent)
})
}
/**
* Checks all checkboxes for menu locations that might need a warning
*/
const toggleMenuLocationClass = () => {
let menu = document.querySelector(selectors.menuEditor)
currentMaxDepth = 99
menuNames.forEach(item => {
let name = item[0]
let depth = item[1]
let checked = document.querySelector(`${selectors.locationCheckboxes}#locations-${name}`).checked
if (checked) {
menu.classList.add(`menu--has-${name}`)
currentMaxDepth = Math.min(currentMaxDepth, depth)
} else {
menu.classList.remove(`menu--has-${name}`)
}
})
updateBodyStyle()
}
/**
* Binds checkbox events so the CSS class of the menu picker is updated accordingly
*/
const bindMenuLocationCheckboxes = () => {
document.querySelectorAll(selectors.locationCheckboxes).forEach(node => {
node.addEventListener('change', toggleMenuLocationClass, passiveEvent)
})
toggleMenuLocationClass()
}
/**
* Binds an alert to the menu editor, showing it if the menu becomes > 2 nodes deep
*/
export default () => {
if (document.querySelector(selectors.menuEditor) === null) {
return
}
bindMenuListener()
bindMenuLocationCheckboxes()
}
C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\scss\admin.scss
///
// Styling for WordPress editor
//
// @author Roelof Roos <github@roelof.io>
// @license MPL-2.0
///
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// Our styles
@import "admin/no-customize";
@import "admin/menu";C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\scss\editor.scss
///
// Styling for WordPress editor
//
// @author Roelof Roos <github@roelof.io>
// @license MPL-2.0
///
@import '~bootstrap/scss/bootstrap';
C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\scss\theme.scss
///
// Front-end theme
//
// Only used to display the error page
//
// @author Roelof Roos <github@roelof.io>
// @license MPL-2.0
///
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/reboot";
html,
body {
width: 100%;
height: 100%;
background-color: #{gray('800')};
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100%;
padding: 0;
color: #{color('white')};
text-align: center;
font-family: "Open Sans", Arial, sans-serif;
box-shadow: inset 0 0 100px rgba($black, .8);
text-shadow: 0 2px 4px rgba($black, .5);
}
h1 {
color: inherit;
font-family: inherit;
font-size: 2.25rem;
font-weight: 500;
line-height: 1.1;
small {
color: #{gray('400')};
font-size: 1.5rem;
font-weight: normal;
line-height: 1;
}
}
a {
border-bottom: dotted 1px #{gray('400')};
color: #{color('white')};
font-size: inherit;
text-decoration: none;
}
.lead {
color: #c0c0c0;
font-size: 1.375rem;
line-height: 1.4;
}
.cover {
display: flex;
flex: 0 1 100%;
flex-flow: column nowrap;
justify-content: center;
padding: 0 1.25rem;
}
footer {
flex: 0 1;
width: 100%;
height: 2.5rem;
color: #{gray('300')};
font-size: .875rem;
}C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\scss\admin\menu.scss
///
// Hides menu items outside of the visible spectrum
//
// @author Roelof Roos <github@roelof.io>
// @license MPL-2.0
///
%menu-invisible-item {
&.sortable-placeholder {
border-color: #{theme-color('warning')};
background-color: #{theme-color-level('warning', -6)};
}
.menu-item-handle {
border-color: #{theme-color-level('warning', -3)};
background-color: #{theme-color-level('warning', -4)};
overflow: visible;
}
// Notice
.menu-item-handle::after {
display: inline-block;
position: absolute;
top: 5px;
right: -215px;
width: 200px;
padding: 7px;
color: #{theme-color-level('warning', 2)};
box-sizing: border-box;
content: 'Dit element is niet zichtbaar in het gekozen menu!';
line-height: 12px;
}
}
%menu-depth-notice {
display: block;
margin: 5px 0 15px;
padding: calc(3px + 0.5em) 14px;
// Style like info
border: 0;
border-radius: 3px;
border-left: 4px solid #{theme-color-level('info', -4)};
background-color: #{color('white')};
transition: none 150ms;
transition-property: border-left-color, background-color;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
.menu.menu--has-header,
.menu.menu--has-footer,
.menu.menu--has-footer-legal {
.menu-item-depth-2,
.menu-item-depth-3,
.menu-item-depth-4,
.menu-item-depth-5 {
@extend %menu-invisible-item;
}
&::before {
@extend %menu-depth-notice;
}
&.menu--has-overflow::before {
border-left-color: #{theme-color-level('danger', -4)};
background-color: #{theme-color-level('danger', -9)};
}
}
.menu.menu--has-header::before {
content: 'Dit menu kan tot 1 niveau diep!';
}
.menu.menu--has-footer,
.menu.menu--has-footer-legal {
.menu-item-depth-1 {
@extend %menu-invisible-item;
}
&::before {
content: 'Dit menu kan alleen één niveau hebben.';
}
}C:\xampp\htdocs\wordpress1\wp-content\themes\wordpress-theme\assets\scss\admin\no-customize.scss
///
// Hides customisation menu
//
// @author Roelof Roos <github@roelof.io>
// @license MPL-2.0
///
.hide-if-no-customize {
display: none;
visibility: hidden;
clip: rect(0, 0);
}
Previousinstall wordpress cmd, git (ok)Next[LARAVELWORDPRESS] semana wp laravel wordpresscorcel (ok)
Last updated
Was this helpful?