Creación de archivos all.css y all.js para la plantilla de WordPress

2 minutos de lectura

he diseñado un WordPress tema para mi. Debido a la gran cantidad de códigos, he dividido el style y script archivos en varios archivos.

He introducido todos estos archivos en mi plantilla utilizando el siguiente código que he colocado en el función archivo:

add_action( 'wp_enqueue_scripts', 'files_assets' );

function files_assets() {
    
// Introducing CSS files
  wp_enqueue_style( 'Bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.0.0' );


// Introducing JS files
  wp_enqueue_script( 'jQuery3.4.1', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array( 'jquery' ), '1.4.1', true );

}

El número total de mis archivos de estilo y script es 61 archivos e introducirlos a todos en la plantilla a través del código anterior es muy difícil.

¿Hay alguna manera de vincular todos mis archivos de estilo creando el all.css archivo e introducir solo este archivo en mi plantilla?

Y haz lo mismo con script archivos a través de all.js?

avatar de usuario de protob
protob

Puedes usar una herramienta de construcción como gulp o webpack para crear paquetes js y css. Aquí hay una configuración de muestra para gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

gulp.task('styles', function() {
  return gulp.src('./src/css/*.css')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('all.css'))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('watch', function() {
  gulp.watch('./src/css/*.css', gulp.series('styles'));
  gulp.watch('./src/js/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('styles', 'scripts', 'watch'));

  • Hola. Es decir, si creo un archivo llamado gulpfile.js y pongo su código en él. ¿No hay necesidad de introducir archivos a través del código anterior en la función?

    – Desarrollador

    23 de febrero a las 6:03

  • Quiero presentar solo la carpeta JS y CSS que escribí yo mismo.

    – Desarrollador

    23 de febrero a las 6:05

  • Esta configuración de Gulp simplemente une todos los archivos en src/js y src/css. Coloque los archivos que desea procesar allí. Todavía tienes que incluir los paquetes. dist/all.js y dist/all.css en wordpess usando wp_enqueue_style y wp_enqueue_script

    – protob

    23 de febrero a las 6:11


¿Ha sido útil esta solución?