• اطلاعیه ها

    • Saeed Fard

      برگزاری میتاپ وردپرسی   14/08/96

      بعد از اولین دوره همایش وردپرس در ایران اگر پیگیر اخبار وردپرس بوده باشید، حتما خبر برگزاری چندین میتاپ و جلسه متعدد وردپرسی را شنیده‌اید، یکی از بحث‌های اصلی که محور اصلی این میتاپ‌ها بوده است برگزاری وردکمپ بود که به طور جدی دنبال می‌شود. این میتاپ‌ها و جلسات توسط جمعی از فعلان حوزه وردپرس در کنار وردپرس‌پارسی برگزار می‌شد و مسائل مربوط به این حیطه و از جمله وردکمپ مورد بحث قرار می‌گرفت. این بار با رایزنی‌هایی که با تیم اصلی وردپرس داشتیم در بخش دوم این رویدادها قصد داریم که میتاپ‌ها و جلسات وردپرسی را به صورت آزاد برگزار کنیم تا تمامی علاقه‌مندان و دوست‌داران وردپرس فرصت حضور داشته باشند و با گردهمایی، جامعه کاملتری از دوست داران وردپرس بسازیم و از تجربیات یکدیگر استفاده کنیم.   بدیهی است که این رویدادها با رویکرد مثبت در جهت سود رسانی به جامعه وردپرس و افراد حاضر در آن برگزار می‌شود و برای تمامی علاقه‌مندان به وردپرس است. پس اگر یک کاربر معمولی وردپرس یا یک توسعه دهنده هستید می‌توانید در این رویدادها شرکت کنید. ما در ملاقات‌هایمان از موارد مختلف و کاربردی وردپرس صحبت می‌کنیم و علاقمند به توسعه هر چه بیشتر وردپرس در ایران هستیم. ما وردپرس را دوست داریم. عضویت در این گروه برای همه افرادی که مایل به پیوستن هستند بدون در نظرگرفتن توانایی‌ها، مهارت‌ها، وضعیت مالی و یا معیارهای دیگر باز و رایگان است. فضای میتاپ‌ها و جلسات ما دوستانه و آزادنه و دور از هرگونه تبعیض و رفتارهای زننده است. بر این اساس از تمامی دوستانی که علاقه‌مند به شرکت در میتاپ‌های وردپرس هستند دعوت می‌شود تا از طریق لینک زیر در سایت میتاپ اقدام به ثبت‌نام کنند و منتظر خبرهای برگزاری جلسات در آینده باشند . لینک ثبت نام و عضویت : https://www.meetup.com/Iran-WordPress-Meetup    

4 پست در این موضوع قرار دارد

getting_started_with_gulp.png

با سلام خدمت دوستان عزیز

در این تاپیک، قصد دارم درمورد فریم‌ورک Gulp که تحت NodeJS هست، آموزش بدم.

آموزش‌های این تاپیک، کاربردی هستند، بنابراین بعد از جلسه اول و دوم، شروع به توضیح مثال‌های کاربردی Gulp می‌کنیم که البته شما کاربران هم می‌تونن مثال ارسال کنن.

خب:

1. در این تاپیک نه سؤال بپرسید و نه اسپم بدید. بعد از جلسه سوم، می‌تونید مثال‌های خودتون رو در همین تاپیک ارسال کنید.

2. آموزش‌های پیوسته هستند و در آخر یه فایل PDF در اختیار کاربران قرار میگیره.

3. برای این آموزش، باید Javascript را در حد متوسط بلد باشید، می‌تونید از این آموزش Black_Sky عزیز کمک بگیرید.

4. اگه پیشنهاد یا انتقادی درمورد تاپیک دارید، به صورت پیام خصوصی برای من ارسال کنید.

موفق باشید.

13

به اشتراک گذاری این پست


لینک به پست

nodejs.png

نصب و راه‌اندازی

پیش از شروع با Gulp باید آن را نصب کنیم. نصب Gulp بسیار ساده است و با اجرای یک دستور در خط فرمان به راحتی انجام می‌شود. برای نصب Gulp شما باید اول NodeJS را نصب کرده باشید.

برای دانلود و نصب NodeJS می‌توانید به وب‌سایت آن مراجعه کنید و نسخه متناسب با سیستم‌عامل خودتون رو دانلود و نصب کنید. بعد از نصب، در صورتی که در سیستم‌عامل ویندوز هستید، وارد Node.js command prompt شوید و در صورتی که در از سیستم‌عامل Unix (لینوکس و مک و ...) استفاده می‌کنید، ترمینال رو باز کنید.

سپس با واردکردن دستور node از نصب‌بودن اون مطمئن بشید.

هم‌چنین شما به Node Package Manager یا همون npm هم نیاز دارید. npm کارش دانلود و نصب پکیج‌های ناد مثل gulp و browser-sync هست. معمولاً npm همراه با NodeJS نصب میشه، شما می‌تونید اینو با واردکردن دستور npm در ترمینال یا خط‌فرمان امتحان کنید. در صورتی که npm نصب نبود، با یه گوگل ساده می‌تونید نحوه نصب npm رو با توجه به سیستم‌عاملتون پیدا کنید.

بعد از این‌که از نصب‌بودن npm و NodeJS مطمئن شدید، با واردکردن دستور زیر در ترمینال یا خط‌فرمان Gulp رو نصب کنید:


npm install -g gulp

نکته: برای سیستم‌های یونیکس نیاز دارید که از sudo استفاده کنید.

در این حین که Gulp دانلود و نصب می‌شه، ما هم درمورد Gulp کمی صحبت کنیم.

Gulp چیه؟

Gulp یک سیستم اجرای وظیفه (Task Runner) اتوماتیکه که به شما کمک می‌کنه تا Productivity شما رو در توسعه فرانت‌اند افزایش بده. مثلاً Gulp می‌تونه شما رو از شر F5 زدن برای تست CSS نجات بده. اگه از Sass یا Less استفاده می‌کنید، به شما این امکان رو میده که بلافاصله بعد از این‌که فایل سورس خودتون رو سیو کردید، فایل CSS هم Build بشه و به مرورگر منتقل بشه.

شگفت‌انگیز نیست؟

Gulp چی نیست؟

* Gulp یه زبان برنامه‌نویسی نیست، بلکه یک پکیج برای NodeJSه.

* Gulp به درد بک‌اند (Back-End) نمیخوره، مگر در مواردی، مثلاً ایجاد فایل POT برای ترجمه قالب و پلاگین وردپرس

* Gulp این همه کار رو انجام نمیده، برای انجام بقیه موارد شما باید پلاگین‌های گالپ رو نصب کنید.

فکر می‌کنم حالا Gulp نصب و دانلود شده! میتونید با تایپ دستور gulp اینو امتحان کنید، اگه خطای no gulpfile.js found رو دریافت کردید، نگران نباشید! همه چیز طبیعیه!

----

جلسه بعد: اولین Task

موفق باشید.

10

به اشتراک گذاری این پست


لینک به پست

first_task_topic.png

ساخت اولین Task - مقدمات

در پست قبلی اشاره‌ای کردم که Gulp یک سیستم Task Runner اتوماتیکه. حالا این که گفتی یعنی چی؟ :D

- گالپ به ما قابلیت ایجاد Task یا همون وظایف رو میده. مثلاً ما میتونیم یه Task تعریف کنیم که وقتی ما Task را اجرا کردیم، شما فلان کار رو انجام بده. مثلاً شما تعریف می‌کنی که وقتی دستور gulp رو اجرا کردی، تمام فایل‌های Sassت رو تبدیل به CSS کنه یا به قول اجنبی‌ها Build کنه!

اما گالپ قابلیت دیگه‌ای به نام Watch به ماه میده، به این معنا که ما میتونیم فایل‌های موردنظرمون رو به گالپ بدیم که زیرنظر بگیره و هرموقع که تغییر کرد، اون‌وقت Taskیی رو اجرا کنه، مثلاً می‌تونیم تعریف کنیم که اگر فایل‌های sass تغییر کرد (مثلاً در ویرایشگر تغییرات خودتون رو Save کردید)، بلافاصله همه رو Buid کنه.

برای ایجاد اولین Task، از یک Task معمولی شروع می‌کنیم که خودتون باید به گالپ بگید که این Task رو اجرا کنه و کاری به Saveشدن فایل نداره. Task موردنظرمون، ایجاد یه برنامه هست که فایل‌های CSS رو بخونه و Minify کنه و در قالب یک فایل ذخیره کنه.

باید کدهای Task را در فایلی به نام gulpfile.js بنویسیم تا اجرا شود، احتمالاً دلیل ارور no gulpfile.js found که در پست قبل اشاره کردم رو فهمیدید. گالپ برای اجرا به gulpfile.js که خودمان می‌نویسیم احتیاج دارد. خب، منتظر چی هستیم؟ بریم gulpfile.js بنویسیم! در دایرکتوری موردنظر خودتون gulpfile.js رو ایجاد کنید و با ویرایشگر موردعلاقه‌تون بازش کنید.

از کدهای ابتدایی و اساسی gulpfile.js شروع می‌کنیم:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {
// ...
} );

برای اساس کار، ما ابتدا کلاس خود Gulp را فراخوانی می‌کنیم، سپس با استفاده از gulp.task یک Task جدید تعریف می‌کنیم. پارامتر اول gulp.task همیشه نام Task هست که باید انگلیسی باشه و برای اجرای اون‌هم نیاز داریم تا این اسم رو فراخوانی کنید.

حالا برای اجرای Task کافیه که توی ترمینال خودتون (که قبلاً به دایرکتوری cd کردید) فرمان gulp default رو اجرا کنید. با اجرای دستور، Task به نام default اجرا می‌شود. اگر در کد بنویسیم ehsaan و در ترمینال هم gulp ehsaan را فراخوانی کنیم، گالپ سراغ Task به نام ehsaan می‌رود.

نکته‌ای که قابل توجه هست اینه که در صورتی که Task به نام default تعریف کنید، با اجرای دستور gulp به تنهایی، همون default اجرا میشه. :)

فایل gulpfile.js زیر رو در نظر بگیرید:



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', function() {
// ...
} );

gulp.task( 'task3', function() {
// ...
} );

فرض کنید که ما باید حتماً اول task1 رو اجرا کنیم، بعد task2 و بعد task3، خب احتمالاً راه‌حل اینه:


gulp task1
gulp task2
gulp task3

اما چندان منطقی به نظر نمیاد! Gulp به ما امکان تعریف پیش‌نیاز برای اجرای Taskها رو میده، کافیه بعد از پارامتر نام Task، یک آرایه از نام Taskهای پیش‌نیاز را تعریف کنید! به همین راحتی! مثلاً در مثال زیر، برای اجرای task2 نیاز به task1 هست و اجرای task3 نیاز به task2 هست.



var gulp = require( 'gulp' );

gulp.task( 'task1', function() {
// ...
} );

gulp.task( 'task2', [ 'task1' ], function() {
// ...
} );

gulp.task( 'task3', [ 'task2' ], function() {
// ...
} );

حالا اگر تنها task3 رو اجرا کنید، می‌بینید که task1 و task2 به ترتیب اجرا خواهند شد.

در قسمت بعد، ایده‌ی خودمون رو عملی می‌کنیم ;)

----

قسمت بعدی: نوشتن یک Task کاربری

موفق باشید.

8

به اشتراک گذاری این پست


لینک به پست

gulp_task_2.png

ساخت یک gulpfile.js حسابی!

اینم آخرین پست آموزشی در تاپیک آموزش کاربردی Gulp! بعد از خوندن پست، شما می‌تونید یه محیط اتوماتیک حسابی با Gulp برای خودتون طراحی کنید و حالشو ببرید! بعد از این پست، شروع به مثال‌زدن می‌کنیم، مثلاً این‌که چطور پلاگین باحال browser-sync رو با گالپ هماهنگ کنیم یا تو چند دقیقه یه CSS رو راست‌چین کنیم!

خب توی پست قبل گفتم که میخوایم یه gulpfile.js بسازیم که تا بهش گفتیم فایل‌های CSS ما رو بخونه، minify کنه و در قالب یه فایل جمع کنه! همتون می‌دونید که هرچی فایل‌های CSS و JS یک فایل کم‌حجم‌تر باشن خیلی بهتره و روی سئو تأثیر داره (شخصاً به سئو هیچ اعتقادی ندارم) و چه بهتر که این فایل‌ها در قالب یک فایل واحد جمع بشن.

خب برای کم‌حجم‌کردن (که بهش میگیم Minify) و بعد هم یکی‌کردن (بهش می‌گیم concat) سایت و سرویس‌های خیلی زیادی وجود دارن که البته یه کم کار سخت میشه که مرتب بخواید روی سرویس‌ها و سایت‌ها آپلود کنید و بعد دوباره دانلود کنید، بنابراین از GulpJS کمک می‌گیریم که با اجرای یه دستور، همه‌ی این کارها رو انجام بده.

به قول یکی از دوستان بعد از مدتی متوجه میشید که گالپ تنها کاری که نمی‌تونه انجام بده، اینه که بره از سر کوچه نون بخره :D

اما این Minifyکردن و Concat رو گالپ به تنهایی نمیتونه انجام بده و باید از پلاگین‌های گالپ استفاده کنیم. پلاگین‌هایی که برای این مورد کار ما نوشته‌شده‌اند اسمشون gulp-minify-css و gulp-concat هست، بنابراین برای انجام این‌کار باید این دوتا پلاگین رو نصب کنیم.

1. نصب پلاگین‌ها

یه کم از تئوریات بیایم بیرون، اگه جایی از تئوریات رو نفهمیدید، با یه سرچ ساده می‌تونید به نتایج خوبی برسید. کارمون رو با نصب دوتا پلاگین gulp-minify-css و gulp-concat شروع می‌کنیم.

برای نصب از npm کمک می‌گیریم، توی خط‌فرمان یا ترمینالتون این دستور رو وارد کنید:


npm install -g gulp-minify-css gulp-concat

نکته: sudo فراموشتون نشه!

2. استفاده از پلاگین‌ها

گر صبر کنید، بعد از مدتی ز گالپ حلوا سازید و پلاگین‌هاتون نصب میشه. حالا برمی‌گردیم سر gulpfile.js خودمون:


var gulp = require( 'gulp' );

gulp.task( 'default', function() {

} );

باید پلاگین‌های موردنظر خودمون رو در gulpfile.js فراخوانی کنیم، مثلاً اینطوری:



var gulp = require( 'gulp' );
var minifyCss = require( 'gulp-minify-css' );
var concat = require( 'gulp-concat' );

حالا پلاگین‌های ما آماده هست!

حالا یه Task می‌سازیم که فایل‌های CSS رو minify کنه و یکی کنه و بریزه توی دایرکتوری dist.

خب من یه Task به نام build-css تعریف می‌کنم و کدهای خودم رو می‌نویسم:



gulp.task( 'build-css', function() {
return gulp.src( './css/*.css' )
.pipe( minifyCss() )
.pipe( concat( 'style.css' ) )
.pipe( gulp.dest( './dist/' ) );
} );

نترسیدید که؟! :D

کد خیلی ساده و خوانا هست!

اول که از gulp.src برای خوندن فایل‌های موردنظرمون استفاده می‌کنیم، به gulp.src می‌گیم که هر فایلی که در مسیر /css/ با پسوند css هست رو پیدا کنه، بعد minifyCss رو روش اجرا کنه و بعد concat رو اجرا کنه. به concat هم پارامتر نام فایل حاصل رو میدیم که همه رو که یکی کرد توی چه فایلی بریزه و در آخر هم با gulp.dest می‌گیم که حاصل رو کجا بریزه که ما بهش گفتیم در دایرکتوری dist بریزه!

خب حالا کافیه که دستور gulp build-css رو اجرا کنید و جادوی gulp رو ببینید! :D

راحت بود، نه؟ البته اینطوری کسی یاد نمی‌گیره :D

ان‌شاءالله پست‌های بعدی با هم مثال کار می‌کنیم. خودتون هم gulp plugins رو گوگل کنید و هر کدوم که به نظرتون جالب‌تره رو دانلود کنید و ازش استفاده کنید!

-----

منتظر گذوشتن مثال‌هاتون توی همین تاپیک هستم.

موفق باشید.

8

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط سعید فرزادی پور
      با عرض سلام
      من به مشکلی خوردم که راه حل اون رو نمیدونم
      در هدر سایت یک نویگیشن بار دارم که منوی اصلی سایتم به صورت دراپ داون در این نویگیشن بار وجود داره ، قال سایت من shaply هستش و استفاده از ویجت ها در body بازه ، من با استفاده از یک ویجت اسلایدر در بالاترین قسمت و زیر هدر سایت که ارتفاع اونم 55 پیکسل هستش اسلایدر بزرگ ایجاد کردم ، و حالا زمانی که میرم روی دراپ داون ها متاسفانه تا قبل از اسکرول کردن به پایین ، زیر منو ها به زیر اسلایدر میرن ، اما بعد از اسکرول کردن به پایین این مشکل حل شده و منو ها و زیر منو ها نمایش داده میشن ، هرچه z-index رو افزایش دادم نتیجه ای نداشت ، چطور میتونم این مشکل رو حل کنم ؟
      و سوال دوم این که در این تم منو ها اول به پایین و بعد به راست باز میشن و من میخوایم سایت رو به صورت فارسی داشته باشم و میخوام اول به پایین و بعد به چپ باز بشن منو ها , چه تغییری میتونم در css ایجاد کنم ؟
    • توسط poruamohammady
      سلام دوستان من یه مدت هست افزونه هایی که نصب می کنم ورد پرس بهم این اخطار هار رو میده کسی میتونه کمک کنه برای مثال تازگی ها افزونهwp-super cacheرو که نصب کردم این اومد قبلا هم چیزای دیگه بود مرسی اگر راهنمایی کنید

    • توسط mehran-b
      با سلام و عرض ادب خدمت تمامی کاربران انجمن وردپرس پارسی
       
      امروز یک کدی براتون قرار میدم که با استفاده از این کد میتونید به تمامی پست های یه دسته خاص از وب سایتتون متای robots با مقدار noindex,follow اضافه کنید.
       
      در صورت نصب بودن افزونه سئو وردپرس
      add_filter('wpseo_robots', 'mehran_specific_category_posts_add_noindex_yoast'); function mehran_specific_category_posts_add_noindex_yoast($content) { if(is_single() && in_category(777)) { return "noindex,follow"; } return $content; } در صورت نصب نبودن افزونه سئو وردپرس
      add_action('wp_head', 'mehran_specific_category_posts_add_noindex'); function mehran_specific_category_posts_add_noindex() { if(is_single() && in_category(777)) { $output = '<meta name="robots" content="noindex,follow" />' . "\n"; } echo $output; }  
      توجه1: کدهای بالا رو باید در فایل functions.php قالب سایتتون و زیر اولین
      <?php قرار بدید.
      توجه2: به جای عدد 777 در کد باید آیدی دسته ای رو قرار بدید که قراره پست هاش noindex,follow بشن.
       
      موفق باشید
    • توسط mbonjakhi
      باسلام
      سوالی از خدمتتون داشتم.
      میشه من یه دامنه .ir خریداری کنم و کد های یک سایت خاص رو کلا کپی کنم و تو دامنه خودم بکار ببرم؟
      یعنی اینکه دیگه نیازی به طراحی سایت نداشته باشه و به راحتی سایتم ساخته بشه؟
      اگه امکانش هست واسم یه مقدار توضیح بدید باید چیکار  کنم.
      ممنون
    • توسط behnam_buss
      سلام
      بخش دسته بندی محصولات در ووکامرس من غیرفعال شده و دسته بندی هایی که قبلا انجام داده بودم رو نمی تونم ببینم و ویرایش کنم و یا حتی وقتی یه دسته بندی جدید هم می سازم نمایش داده نمیشه.
      هر محصول هم که اضافه می کنم و جایی که باید محصول رو تو دسته بندی خودش قرار بدم بازم دسته بندی رو تو قسمت ویرایش خود محصول نمی بینم و نمی تونم تو دسته ی خاص خودش قرار بدم.
      ضمنا همین مشکل برای بخش فهرست های سایتم هم بوجود اومده و فهرست ها رو نمی بینم و کلا بخش فهرست های وردپرسم غیرفعال شده و نمی تونم فهرست جدید بسازم.
      نکته ای که هست اینه که فهرست ها و دسته بندی های قبلی که ساخته بودم تو خود سایت که داره نمایش داده میشه درسته و تو بخش مدیریت وردپرس این مشکلات وجود داره!!!