آموزش Front-End

طراحی فرم ورود وردپرس با Flat UI

وردپرس پرجمعیت ترین و یکی از بهترین سیستم های مدیریت محتوا است که در حال حاظر بیش از 26 درصد از وب سایت های جهان از آن استفاده می کنند. اگر وردپرس کار کرده باشید ،برای ورود و خروج به کنترل پنل ادمین یا حساب کاربری خود  فرمی وجود دارد که نام کاربری  و رمز عبور  را درخواست می کند.این فرم یک فرم بسیار ساده می باشد به تصویر زیر دقت کنید. در این آموزش، به چگونگی  ساخت یک فرم ورود سفارشی می پردازیم.برای زیبا شدن فرم از Flat UI استفاده می کنیم. در ابتدا Flat UI را دانلود کرده و محتویات آن را در قالب خود قرار دهید.اگر فایل زیپ بود محتویان آن را استخراج کنید. در زیر تصویر مربوط به فرمی که می خواهیم ...

ادامه مطالب
ساخت یک هاست مجازی در مک

  سلام من میلادی هستم و در این قسمت می خواهم ساخت یک هاست مجازی در سیستم عامل مک را به شما آموزش بدهم که مناسب برای تمام وب کاران می باشد و کار ما را در آموزش وردپرس و کار با آن بهتر خواهد کرد.با مردان وردپرس همراه باشید. اگر شما در لوکال هاست خود کار می کنید و می خواهید که یک هاست مجازی در لوکال خود قرار داده برای توسعه دادن به قالب خود به طوری که دیگر کارهای شما در لوکال هاست نباشد مثلا به جای  localhost/wpmen 127.0.0.1/wpmen شما بخواهید لینک  wpmen.dev را قرار دهید که این هم برای توسعه دهندگان وب از جمله frontend کار ها و backend کارها مناسب می باشد.برای این کار ما آموزش ...

ادامه مطالب
ساخت یک هاست مجازی در ویندوز

اگر شما در لوکال هاست خود کار می کنید و می خواهید که یک هاست مجازی در لوکال خود قرار داده برای توسعه دادن به قالب خود به طوری که دیگر کارهای شما در لوکال هاست نباشد مثلا به جای  localhost/wpmen 127.0.0.1/wpmen شما بخواهید لینک  wpmen.dev را قرار دهید که این هم برای توسعه دهندگان وب از جمله frontend کار ها و backend کارها مناسب می باشد.برای این کار ما آموزش آن را در ویندوز را برای شما عزیزان توسعه دهنده وب قرار می دهیم.این کار به وسیله  تنظیمات آپاچه انجام می شود. از مزایای هاست مجازی: میزبان مجازی  تمیزکننده URL ها می باشند به عنوان مثال   - localhost /mysite را می توان به  محتوی مقابل mysite.local تبدیل کرد.  میزبان مجازی مجوز دسترسی  ساده تر را فراهم ...

ادامه مطالب
آموزش Bootstrap بخش اول – معرفی و فراخوانی

در زمان های قدیم تنها مشکل طراحان وب چند مرورگر محبوب بود که خروجی کدهای نوشته شده درون هر کدام از آن ها به یک شکل نمایش داده می شد و طراحان باید با هر مرورگر کدهای خود را مطالبقت می داند، آتش طراحی برای وب زمانی داغ تر و فروزان تر شد که دستگاه های قابل حمل امکان اتصال به نت را پیدا کردند و دیگر می توانستی با هر دستگاهی وب را مشاهده کنید، به راستی می توان گقت طراحی وب تبدیل به جهنمی شد برای طراحان. اما چندی نگذشت که شرکت ها و افراد مشکل را ساده تر کردند یکی از کمپانی های معظم دنیا توییتر بود که در سال 2011 با ارایه فریم ...

ادامه مطالب
کلاس های css پیش فرض وردپرس

اگر شما طراح وب هستید همیشه از کد های css خاص خود استفاده می کنید .اما گاهی پیش می آید قالبی که می خواهید طراحی کنید قرار است در وردپرس تبدیل شود.همانگونه که می دانید وردپرس کلاس های خاصی را داراست که هنگامی که قالب های خود وردپرس را نیز می گیرید آنها را داراست و طراحان وردپرس برای بهتر شدن کار خویش از این کلاس ها استفاده می کنند تا در تبدیل کد ها به وردپرس بتوانند توسعه دهندگان قالب ها دیگر خیال تعویض و یا  دوباره کاری برای طراح نداشته باشد .به عنوان مثال منوهای سایت خود را در نظر بگیرید که برای خیلی از تبدیل کنندگان قالب بسیار دشوار می باشد. حال در اینجا ما برای ...

ادامه مطالب
استایل دهی چیدمان نظرات در وردپرس

 در این مطلب شما یاد می گیرید که چگونه در سایت وردپرسی خود با استایل های پیش فرض نظرات کاربران را نمایش دهید.کد های css ای که در زیر نمایش می دهیم را در فایل css خود قرار داده و نظرات را به زیبایی نمایش دهید. در زیر class ها و id های پیشفرض css وردپرس را می بینید. /*Comment Output*/ .commentlist .reply {} .commentlist .reply a {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist ...

ادامه مطالب
حذف backspace با جی کوئری

  وقتی شما یک متن را در حال نوشتن باشید و یا در حال ویرایش باشید اگر از حالت ادیتور خارج شوید و دکمه backspace را بزنید فاجعه ای برای مطلب شما پیش می آید که شما را تا آخرین تغییرات می برد و دیگر CTRL+Z تاثیری ندارد.برای غیر فعال کردن آن شما می توانید کد جاوااسکریپت زیر را در css مربوط به ادمین پنل خود بگذارید.با مردان وردپرس باشید تا این آموزش را فراگیرید. $(document).unbind('keydown').bind('keydown', function(event) { var doPrevent = false; if (event.keyCode === 8) { var d = event.srcElement || event.target; ...

ادامه مطالب
استایل دادن به منوها در وردپرس

اگر می خواهید منوهایتان داینامیک باشند و در قسمت نمایش فهرست ها پنل ادمین خود در وردپرس  بتوانید استایل منو ها را تغییر دهید از این آموزش استفاده کنید .در این آموزش هم نحوه نمایش منو ها را به شما آموزش می دهیم و هم نحوه استایل دهی آن. ابتدا باید کد زیر را در functions.php بزنید تا منوهای شما اگر در قالبتان وجود ندارند فعال شوند.برای تم های پیش فرض و وردپرسی شده اکثرا این گزینه را نمی خواهید بگذارید ولی اگر در قسمت نمایش گزینه فهرست ها وجود نداشت این کد را بگذارید //defenition of top mnenu function register_top_menu(){ register_nav_menus( array( 'top_menu' =>__('منوهای بالا') ) ); } add_action('init','register_top_menu'); ائلین چیزی که باید بدانید اینست که وردپرس منو ها را به صورت نامرتب شده(عدم دلخواه شما ) لیست ...

ادامه مطالب
استایل دهی به زیر موضوعات در وردپرس

شما از طریق کد زیر می توانید زیر دسته ها را در وردپرس استایل بدهید .اگر بخواهید نمایش داده نشوند و یا با سبک خاص نمایش داده شوند.کافیست آن را در یکی از فایل های css خود قرار دهید عدم نمایش زیر دسته بندی ها  .children { display:none; } استایل  دهی زیر دسته بندی ها    .children { padding: 0 0 0 6px; margin: 0 0 0 8px; border-left: 1px solid #333; }  

ادامه مطالب
آموزش وردپرس، استایل دهی فرم های contact form 7

مدیران سایت ها برای اینکه با کاربران خود تعامل داشته باشند از فرم های تماس استفاده می کنند .این فرم ها به مدیران بسیار کمک می کند تا  به سوالات کاربران پاسخگو بوده و همچنین کاربران برای ارتباط لازم نباشد پست الکترونیکی خود مانند gmail را باز کرده و با مدیران ایمیل دهند فقط کافیست فرم تماس را پر کرده و دکمه ارسال را بزنند. وردپرس دارای فرم های تماس بسیاری می باشد مانند gravity و یا contact form 7 که از بهترین فرم ساز های وردپرس می باشند .حتما هم پیش آمده که وقتی از پلاگین Contact Form 7  استفاده  کرده باشید و  وقتی فرم ها را در جای مخصوص می گذارید استایل ...

ادامه مطالب