今日、ワードプレスでプロジェクトの自動アセンブリを整理する私のアプローチをHabrの名誉ある聴衆と共有したいと思います。これは、新しいサイトを作成するときの時間を大幅に節約します。
背景
そのため、WordPressでWebサイトを作成し、新しいプロジェクトごとにwordpress.orgにアクセスする必要があります。実際には、そこからWordPress自体と、常に使用するプラグインのセットをダウンロードします。 または、管理パネルからプラグインを直接インストールするか、さらに悪いことに、前のサイトのディレクトリからプラグインをコピーします。 私はいつもそれが好きではありませんでした。どういうわけかエレガントではなく、美的ニーズを満たしていません。 さらに、少なくとも少し時間がかかりますが、まだ時間がかかります。 したがって、このプロセスを改善する方法を考えました。 必要なものをすべてダウンロードし、パパにきちんと折りたたみ、「git init」と「git push」を実行しました。 さて、今、Bitbucketにリポジトリがあり、必要なすべてのWPのアセンブリが保存されています。 この時点から、開発プロセスの開始時に、「git clone」を実行して準備を整えることができます。 この方法は長い間私を喜ばせませんでした-「欠陥」が発見されました。 すなわち：
- リポジトリの過度の使用（プラグインのすべてのソースとCMS自体が保存されます）;
- すべての古いバージョンは常に保存されます（もちろん定期的に更新できますが、怠lazです）。
- SCSS / SASS / LESSソース、縮小されていないJSコード、その他の重要なコンポーネントを同じリポジトリに保存したいのですが、理論的にはプロジェクトの製品版と重複しないようにします。
その後、私と私の怠inessは相談し、新しいサイトで作業を開始するときに、すべて（すべて）を整理し、開発プロセスに直接移動するために1つ（最大2つ）のコンソールコマンドを入力するだけでエネルギーを消費する準備ができているという結論に達しました。 それから私とは別に怠は考え続け、「すべてがGitに一度に保存され、新しいバージョンをロールする必要がないように（最初は新しいバージョンがあるはずだと言う）、サーバー上でプルを正しく実行できるようにしました（それからすべてにサービスを提供することです）、一般的にはすべてが単独で機能し、迅速に処理されますが、今のところは休みます。」
ウィッシュリストの満足度を満たす
最初に、タスクを小さなリストに形式化しました。
- WordPressコアのインストールと、プロジェクト間をさまようプラグインの現在のバージョンの自動化。
- サーバー環境へのプロジェクト設定の依存関係を実装します。
- クライアント部分のソースコードをプロジェクトから分離します。
- クライアント部分のアセンブリを自動化します。
- Gitリポジトリで非冗長ストレージを整理します。
そして実装を開始しました。 始めるために、WPのドキュメントを読みに行き、開発者が変更しているものからCMSコアを分離できるすばらしいものを見つけました。 この機会に、次のプロジェクト構造をスケッチしました。
content/ wp/ index.php wp-config.php
WordPressコアファイルは「wp」ディレクトリに、「content」はテーマ、プラグイン、言語バージョンなどのフォルダー、「wp-config.php」は標準のWP設定ファイル、「index.php」には、私が置いたドキュメント：
define('WP_USE_THEMES', true); require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );
サーバー上で起動し、チェックし、OK、動作します。 次に、WPの最新バージョンがダウンロードされていることを確認する必要があります。 このために、 Composerを使用しました（インストール方法はこちらで確認できます ）。 以前に作成したすべてのファイルを「app」フォルダーに配置し、すべてのサービスファイルを実行可能ファイル「index.php」より1レベル上に配置しました。 将来、私のサイトはこのディレクトリから起動されます（サーバーのホスト設定を調整することを忘れないでください）。 また、「wp」フォルダーからすべてのコンテンツが消去されました。 プロジェクトのルートに、次の内容のファイル「composer.json」を配置しました。
{ "require": { "php": ">=5.4", "johnpbloch/wordpress": "*", }, "extra": { "wordpress-install-dir": "app/wp", } }
Johnpbloch / wordpressは、Composerを介したインストールに適したWPフォークであり、wordpress-install-dirはCMSカーネルのインストールディレクトリを指します。 コンソールに書き込むことにより：
composer install
すべてが機能することを確認しました。 「app / wp」にダウンロードされた新しいWordPress。 プラグインはどうですか？ wpackagist.orgプロジェクトのおかげで、それらはすべて問題ありません。Composerを使用してプルすることもできます。 これを行うには、「composer.json」を少し変更します。
{ "repositories":[ { "type":"composer", "url":"https://wpackagist.org" } ], "require": { "php": ">=5.4", "johnpbloch/wordpress": "*", "wpackagist-plugin/rus-to-lat-advanced": "*", "wpackagist-plugin/advanced-custom-fields": "*", "wpackagist-plugin/all-in-one-seo-pack": "*", "wpackagist-plugin/google-sitemap-generator": "*", "wpackagist-plugin/contact-form-7": "*", "wpackagist-plugin/woocommerce": "*", "wpackagist-plugin/saphali-woocommerce-lite": "*" }, "extra": { "wordpress-install-dir": "app/wp", "installer-paths": { "app/content/plugins/{$name}/": ["vendor:wpackagist-plugin"], "app/content/themes/{$name}/": ["vendor:wpackagist-theme"] } } }
「リポジトリ」セクションでは、アドレス「wpackagist」が示され、「installer-paths」セクションでは、プラグインとテーマがインストールされるパスが示され、「require」セクションでは、WPプラグインの名前が「wpackagist-plugin / {{plugin_name}」の形式で追加されます} "。 wordpress.orgのほとんどすべてのプラグインは「wpackagist」で利用できます。プラグインが利用できるかどうかはwpackagist.orgで検索できます。
行うことにより：
composer update
「app / content / plugins」ディレクトリに必要なすべてのプラグインがどのように表示されるかを見ました。 ここで、設定を理解する必要があります。タスクは、データベースを作成し、設定を開発環境、ローカルサーバー、独自に依存させることです。 これを行うには、それらを個別のファイル「local-config.php」に絞り込みます。
define( 'DB_NAME', '%%DB_NAME%%' ); define( 'DB_USER', '%%DB_USER%%' ); define( 'DB_PASSWORD', '%%DB_PASSWORD%%' ); define( 'DB_HOST', '%%DB_HOST%%' ); // Probably 'localhost' ini_set( 'display_errors', true ); define( 'WP_DEBUG_DISPLAY', true ); define( 'AUTH_KEY', 'put your unique phrase here' ); define( 'SECURE_AUTH_KEY', 'put your unique phrase here' ); define( 'LOGGED_IN_KEY', 'put your unique phrase here' ); define( 'NONCE_KEY', 'put your unique phrase here' ); define( 'AUTH_SALT', 'put your unique phrase here' ); define( 'SECURE_AUTH_SALT', 'put your unique phrase here' ); define( 'LOGGED_IN_SALT', 'put your unique phrase here' ); define( 'NONCE_SALT', 'put your unique phrase here' );
次のように「wp-config.php」を変更します。
if ( file_exists( dirname( __FILE__ ) . '/local-config.php' ) ) { define( 'WP_LOCAL_DEV', true ); include( dirname( __FILE__ ) . '/local-config.php' ); } else { define( 'WP_LOCAL_DEV', false ); define( 'DB_NAME', '%%DB_NAME%%' ); define( 'DB_USER', '%%DB_USER%%' ); define( 'DB_PASSWORD', '%%DB_PASSWORD%%' ); define( 'DB_HOST', '%%DB_HOST%%' ); // Probably 'localhost' ini_set( 'display_errors', 0 ); define( 'WP_DEBUG_DISPLAY', false ); define( 'AUTH_KEY', 'put your unique phrase here' ); define( 'SECURE_AUTH_KEY', 'put your unique phrase here' ); define( 'LOGGED_IN_KEY', 'put your unique phrase here' ); define( 'NONCE_KEY', 'put your unique phrase here' ); define( 'AUTH_SALT', 'put your unique phrase here' ); define( 'SECURE_AUTH_SALT', 'put your unique phrase here' ); define( 'LOGGED_IN_SALT', 'put your unique phrase here' ); define( 'NONCE_SALT', 'put your unique phrase here' ); }
これで、「local-config.php」ファイルが存在する場合、そこから設定が取得されます。 このファイルを「.gitignor」に追加する必要があります（リポジトリ内のデータベースのパスワードが必要な理由は？）。 「local-config.php」でデータベースにアクセスするためのデータを入力し、WordPressのインストール手順を開始して、管理パネルにアクセスします。
管理パネルで、「設定->一般」セクションにアクセスして、次のようにアドレスを修正する必要があります。
末尾に「/ wp」が付いたWordPressアドレス、「/ wp」が付いていないサイトアドレス。
素晴らしい、サイトを使用できます。 次のステップはユーザー定義のスタイルとスクリプトに専念しました（そうでなければ論理的ではなく、すべてがサーバー自体で行われますが、あらゆる種類のjqueryを手動でダウンロードできますか？）。 準備として、プロジェクト構造を編集しました。
app/ content/ theme/ mytheme/ build/ index.php style.css wp/ index.php local-config.php wp-config.php src/ fonts/ js/ main.js scss/ style.ccss composer.json
src /フォルダーには、フォント、スクリプト、およびスタイルのソースファイルが含まれています。 次に、gulpを使用して収集し、縮小して、フォルダー「app / content / theme / mytheme / build」に追加します。 CSSのプリプロセッサとして、JSのビルドにbrowserSSを使用するために、 SCSSを使用します（インストール方法、誰もが知っていると思いますが、そうでない場合はこちらをご覧ください ）。 nmpを使用してクライアント側の依存関係を強化する必要があると考えました。 「package.json」ファイルは次のようになりました。
{ "devDependencies": { "bourbon": "*", "bourbon-neat": "*", "browserify": "*", "fullpage.js": "*", "gulp": "*", "gulp-clean-css": "*", "gulp-concat": "*", "gulp-sass": "*", "gulp-sourcemaps": "*", "gulp-uglify": "*", "jquery": "*", "normalize-scss": "*", "vinyl-source-stream": "*" } }
私は明らかにこれをnpmで公開するつもりはないので、「devDependencies」以外のセクションに記入し始めませんでした。 私はコンソールで書いています：
npm install
数分待って、示されたすべての依存関係が「node_modules」にきちんと収まったことを確認します。 次の内容を持つ「gulpfile.js」ファイルは、ケーキのチェリーとして機能しました。
'use strict'; var browserify = require('browserify'), source = require('vinyl-source-stream'), gulp = require('gulp'), sass = require('gulp-sass'), uglify = require('gulp-uglify'), cleanCSS = require('gulp-clean-css'), sourcemaps = require('gulp-sourcemaps'), sourcePath = './src/', buildPath = './app/content/themes/mytheme/build/'; //scss gulp.task('scss', function () { return gulp.src('./src/scss/style.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(buildPath + 'css')); }); gulp.task('scss:watch', function () { return gulp.watch(sourcePath + 'scss/**/*.scss', ['scss']); }); //js gulp.task('browserify', function() { return browserify(sourcePath + 'js/main.js') .bundle() .pipe(source('main.js')) .pipe(gulp.dest(buildPath + 'js')); }); gulp.task('browserify:watch', function () { return gulp.watch(sourcePath + 'js/**/*.js', ['browserify']); }); //fonts gulp.task('copy:fonts', function () { gulp.src(sourcePath + 'fonts/**/*', {base: sourcePath + 'fonts'}) .pipe(gulp.dest(buildPath + 'fonts')); }); //minify gulp.task('minify:js', ['browserify'], function(){ return gulp.src(buildPath + 'js/*.js') .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest(buildPath + 'js')) }); gulp.task('minify:css', ['scss'], function(){ return gulp.src(buildPath + 'css/*.css') .pipe(cleanCSS({compatibility: 'ie9'})) .pipe(gulp.dest(buildPath + 'css')); }); //task groups gulp.task('default', ['copy:fonts', 'scss', 'browserify']); gulp.task('watch', ['copy:fonts', 'scss:watch', 'browserify:watch']); gulp.task('production', ['copy:fonts', 'scss', 'browserify', 'minify:js', 'minify:css']);
gulpコマンドは、フォントをコピーし、SCSSをコンパイルし、JSを接着して、ビルドフォルダーにきれいに配置します。 「Gulp Watch」でも同じことが行われますが、ファイルが変更されるたびに行われます。 「Gulp production」は、コメントからファイルをさらに削除し、縮小します。
結果は何ですか？
その結果、上記を繰り返す必要はありません。 すべてを便利にGitHubにアップロードしました： https : //github.com/IvanZhuck/kosher_wp_seeder 。
開始するには、リポジトリを複製し、必要に応じてプラグインと依存関係のリストを調整した後、次のコマンドを実行する必要があります。
composer install npm install
私の怠lazと私は満足しています。プロジェクトはより早く始まり、仕事はより快適になりました。 あなたの質問や提案はコメントで待っています。