Developpement WordPress moa no tena mampidi-bola ny mpanoratra, ka mba zaraina ary ny workspace tsotsotra nefa manamora fiainana rehefa mi-dev WordPress.
PHP code sniffer ho an'ny WordPress
Izy ity moa dia fitaovana iray matanjaka sy mora ampiasaina rehefa manoratra code PHP, mampiseho (Highlight) sy manitsy izay fomba fanoratra code (auto-correction) tsy manaraka standard.
WordPress moa manana ny standard-ny manokana fa tsy manaraka PSR-4, ka noho izany manana ny fichier de configuration PHPCS-ny manokana izy
Installation
Composer no gestionnaire de dépendance PHP ampiasaiko, ka indro ary ny fomba fi-installé-na azy :
#Mila activé-na aloha ny plugin ho an'ny phpcs
composer config allow-plugins.dealerdirect/phpcodesniffer-composer-installer true
#Tsy phpcs tsotra ilay installé-na fa ity efa omen'ny WordPress ity (https://github.com/WordPress/WordPress-Coding-Standards?tab=readme-ov-file#composer-project-based-installation)
composer require --dev wp-coding-standards/wpcsAo anaty VScode
Azonao atao tsara ny mampiasa azy via terminal hanaovana verification sy autocorrection, fa ny ahy aloha plugin VScode, azo configuré-na hanao linting on save sy correct on save. Milamina be.
Vite sy Sass
Ny tena moa dev kamo lahy ka tsy maintsy hanao @import matetika ny zavatra efa vitan'olona foana fa tsy hamorona de zéro zany.
Vite no ampiasaiko, tsy hanaovana serveur local na environnement fa tena juste build fotsiny no atao aminy, ahazoana fichier Javascript miaraka amin'ny dependance rehetra.
Mampiasa SCSS ihany koa satria efa tsy lamaody intsony izany CSS izany. Saas ilay installé-na, dia Vite ihany koa ny manao ny build ka mahazo ny CSS rehetra koa avy eo, misy ireo dépendance rehetra.
Installation
NPM no ampiasaiko, tsy miraharaha izay version aho fa reo no ilaiko dia installé-ko
npm install --save-dev vite sassConfiguration Vite
// Fichier eo amin'ny racine an'ilay projet
import { defineConfig } from 'vite';
export default defineConfig({
root: './src', // Répertoire hiasana, misy ireo fichiers sources
build: {
outDir: '../dist', // Répertoire de sortie ho an'ireo fichiers compilés
emptyOutDir: true, // Fafana daholo aloha ny fichiers alohan'ny build
rollupOptions: {
input: {
main: './src/main.js', // Fichiers d'entrée JS, ato daholo rehefa JS
style: './src/style.scss', // Fichier d'entrée SCSS, ato daholo rehefa SCSS
},
output: {
entryFileNames: 'assets/js/[name].js', // Ilay fichier JS vita build
chunkFileNames: 'assets/js/[name].js', // Sarahany ireo fichiers tiers sasany
assetFileNames: 'assets/css/[name].[ext]', // Ity mamoaka ireo CSS, sarahiny koa matetika ireo css tiers
},
},
},
});Configuration build
Ampiana ireto ligne ireto ao anaty package.json
"scripts": {
"dev": "vite",// Tsy ampiasaiko akory, fa tsy aiko raha mety raha alana
"build": "vite build", // npm run build ao anaty terminal rehefa avy manao modif
"preview": "vite preview" // Tsy miasa eh, fa mety ve ra alana? kamo be aho hi-teste
}Configuration WordPress
Alaina amin'izay ireo ressources compilés dia omena an'i WordPress
function enqueue_vite_assets() {
$version = filemtime(get_template_directory() . '/dist/style.css'); //zesta fotsiny amin'izay tsy mila mamafa cache
wp_enqueue_style(
'vite-style',
get_template_directory_uri() . '/dist/assets/css/style.css',
array(),
$version
);
wp_enqueue_script(
'vite-main',
get_template_directory_uri() . '/dist/asset/js/main.js',
array(),
$version,
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_vite_assets');Raha misy fichiers tiers hafa moa après build dia ampidirina tsirairay eto zareo, fa tsy maka automatique ity fonction ity.
Javascript Linter ho an'ny WordPress
Manana ny règles tiany koa i WordPress eo amin'ny fanoratana JavaScript, ka tonga dia ilay ESLint efa no configuré-ndry zalahy no ampiasaiko
npm install @wordpress/eslint-plugin --save-devConfiguration
// Fichier eo amin'ny racine an'ilay projet
{
"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
}Ao anaty VSCode
Plugin ESLint by Microsoft. Tsy maka sarotra fa mandeha ho azy.
CSS Linter ho an'ny WordPress
Tsy dia hitako loatra ny spécificité an'ny CSS raha mihoatra amin'ny standard ao amin'ny VScode fa misy ilay izy dia ampiasaina eh.
npm install @wordpress/stylelint-config --save-devConfiguration
// Fichier eo amin'ny racine an'ilay projet
{
"extends": "@wordpress/stylelint-config"
}Ao anaty VSCode
Plugin Stylelint by Stylelint.
Prettier
Linter fotsiny moa ny Eslint sy Stylelint, mamoaka erreur fa tsy manitsy automatiquement. Noho izany mapiasa formateur -> Prettier. Format on save dia vita.
npm install @wordpress/prettier-config --save-devConfiguration
// Fichier eo amin'ny racine an'ilay projet
"@wordpress/prettier-config"Ao anaty VSCode
Plugin Prettier Code Formater by Prettier.
Fehiny
Toy izay sy toy izay no workspace sy fomba fiasako rehefa manamboatra theme sy plugin WordPress :
- Gestionnaire de dépendance PHP : Composer
- Gestionnaire de module JavaScript : NPM
- Builder JavaScript sy SCSS : Vite sy Sass
- Linter mampiseho ny erreur PHP : PHPCS
- Correcteur manitsy izay azony ahitsy amin'ny PHP : PHPCBF (efa ao anaty PHPCS ihany)
- Linter mampiseho erreur JavaScript : EsLinter
- Linter mampiseho erreur SCSS : StyleLint
- Correcteur manitsy izay azony ahitsy ao anaty Javascript sy SCSS : Prettier
0 Comments