طراحی مجدد وب سایت وردپرس خود (برای افزودن یک لمس شخصی)

هیچ پلتفرمی دیگر این قدرت را برای شما فراهم نمی کند که از نظر ظاهری و وب سایت خود مانند WordPress سفارشی شود. این یکی از دلایلی است که محبوبیت WordPress در ناشران و توسعه دهندگان وب به طور یکسان است.


شما می توانید یک مبحث WP اساسی (و درامدار) بگیرید ، یک آرم اضافه کنید ، چند خط کد را ویرایش کنید ، CSS خود را تغییر دهید و یک وب سایت حرفه ای (در عین حال قابل شخصی سازی) به دنبال هیچ وقت پیدا نکنید. کار ساده ای است و این آموزش نحوه انجام این کار را به شما نشان می دهد.

اماده ای؟ بیایید ابتدا با چیزهای نخست شروع کنیم؛ رنگها.

طراحی یک طرح رنگی

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

نحوه رنگ آمیزی بیرونی ها و فضای داخلی شما به چند عامل اصلی ترجیحات شخصی شما بستگی دارد.

رنگ آمیزی سایت وردپرس شما نیز متفاوت نیست. پیوندهای خود را چه رنگی می خواهید؟ پیشینه شما ، چگونه می توانید آن را جذاب ترین کنید و رقبا را از دهان خود دور کنید. کدام رنگ پیام شما (یا حتی توانمندسازی) را تکمیل می کند؟ متن خود را چگونه می خواهید؟ محدودیت آسمان در انتخاب رنگهایی که می توانید در سایت WP استفاده کنید.

شما باید از همان ابتدا تمام رنگهایی را که استفاده خواهید کرد تعیین کنید. توصیه می کنم فقط به سه رنگ بچسبانید ، اما آزاد هستید که به اندازه دلخواه خود از رنگ استفاده کنید.

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

بهتر است از بیشتر رنگهایی استفاده کنید که اکثر مردم آنها را ببینند (و امیدوارم) آنها را دوست داشته باشند. من درمورد آرم و مستر شما صحبت می کنم. این مناطق دقیقاً همان جایی است که شما به بیشترین رنگ ها نیاز دارید. بقیه وب سایت شما می تواند کم رنگ تر اما آموزنده تر باشد.

216 رنگ در مقابل 12 رنگ

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

شما خوش شانس هستید ، زیرا من در سراسر اینترنت ماهیگیری کردم و برای شروع کار ابزارهای زیر را پیدا کردم:

قاتل

کولر

Kuler توسط Adobe طراحی شده است تا به توسعه دهندگان وب کمک کند تا طرح های رنگی برتر کلاس را ایجاد کنند. Kuler یک ابزار آنلاین است ، به این معنی که می توانید آن را حمل کنید و از هر کجا استفاده کنید ، اما یک نرم افزار دسک تاپ نیز وجود دارد که به شما در توسعه طرح های رنگی از روی دسک تاپ شما کمک می کند. علاوه بر این ، اگر Adobe ID دارید ، می توانید طرح های رنگی خود را با یک کلیک ذخیره کنید.

قوانین رنگی مختلفی برای استفاده از Kuler وجود دارد که از جمله آنها می توان به تک رنگ ، ترکیبی ، مکمل ، آنالوگ و سه گانه اشاره کرد.

کولر را بررسی کنید.

نمودار رنگی HTML

دانستن رنگهایی که استفاده خواهید کرد تنها نیمی از کار است. برای پیاده سازی رنگ های خود ، باید آنها را به کدهای HTML ترجمه کنید.

نمودار رنگی html

این جایی است که نمودار رنگ HTML وارد می شود. این یک نمودار رنگارنگ با بیش از 200 کد (216 در واقع) کد رنگی وب است. مسلح با نمودار ، هیچ رنگی در زیر آفتاب نباید اجرای آن دشوار باشد.

این کدها با HTML ، CSS ، Adobe PhotoShop و سایر ابزارهای دستکاری گرافیکی کار خواهند کرد ، بنابراین شما تمام آزادی را در جهان دارید که با رنگهای خود به همان اندازه که دوست دارید بازی کنید..

نمودار رنگ HTML را بررسی کنید.

عمومی

اگر به انتخاب رنگ ها به کمک نیاز دارید ، GenoPal برنامه مورد نظر شماست. این یک برنامه وب بسیار ساده است که پالت های رنگی را به پنجره مرورگر شما “پین” می کند. وقتی رنگ های خود را انتخاب می کنید ، آنها در مرورگر شما به شکل “یادداشت های چسبنده” رنگی ظاهر می شوند. ��

ژنوپال

با استفاده از GenoPal می توانید میزان روشنایی و کنترل اشباع رنگ را افزایش دهید ، بنابراین دقیقا سایه مورد نظر خود را به دست می آورید.

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

COLORHEXA

ColorHexa نسخه آنلاین آن است صفحه نقاشی. این وب سایت با وارد کردن کدهای رنگی ، امکان ترکیب رنگ ها را به شما می دهد. برنامه پیشرو آنها ابزار ترکیب رنگ است اما آنها همچنین دارای یک ژنراتور شیب و یک تفریق رنگ هستند. در اینجا کار نبوغ ناب نیست?

colorhexa

چگونه ColorHexa Blender کار می کند؟ تمام کاری که شما باید انجام دهید این است که کدهای رنگی خود را با “+” جدا شده تایپ کنید و ColorHexa بقیه کارها را انجام می دهد. به عنوان مثال ، من سعی کردم:

# ff0000 + # 0000ff + # ff00ff و من # aa00aa کردم. علاوه بر این ، آنها یک صفحه کامل از اطلاعات مربوط به رنگ را به شما می دهند (در رنگ نهایی شما به عنوان مثال # aa00aa). این یکی از ابزاری است که باید خودتان را امتحان کنید تا مانند گذشته هرگز ترکیب رنگ را تجربه کنید.

ColorHexa را بررسی کنید.

ULTIMATE CSS GRADIENT GENERATOR

مولد شیب رنگ نهایی

این احتمالاً بهترین ابزار برای تولید شیب رنگ است. این کاملاً آنلاین است و به شما کمک می کند تا میانی های با طراوت و کدهای CSS مربوطه را تولید کنید. آنها همچنین افزودنیهای Chrome و Firefox را برای شما فراهم می کنند تا بتوانید برای دسترسی آسان تر و سریعتر ، برنامه را در مرورگر خود ادغام کنید.

یک منطقه پیش نمایش وجود دارد که شما شیب خود را مشاهده می کنید ، بنابراین تنها کاری که باید انجام دهید اینست که شما شیب خود را همانطور که فکر می کنید مناسب است تولید کنید. کپی-چسباندن کد CSS تولید شده است. واقعاً کار ساده ای است و رنگ های بیشتری نسبت به آنچه شما استفاده می کنید ، دارند.

ژنراتور نهایی گرادیان CSS را بررسی کنید.

انتخاب فونت ها

حالا که من به شما نشان داده ام که چگونه رنگ هایی مانند پیکاسو را انتخاب کنید و ترکیب کنید ، بگذارید با قلم ها بازی کنیم.

رنگ ها و طراحی وب شما به سمت مردم جلب می شود ، اما این کلمات شما است یعنی صفحات و پست های شما که باعث می شود مردم به اطراف خود بپیوندند.

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

یک میلیون و یک قلم در آنجا وجود دارد ، اما متأسفانه کاربر فقط قلم هایی را که در دستگاه خود نصب شده است ، مشاهده می کند. اگر قلم مورد استفاده شما روی دستگاههای آنها نصب نشده باشد ، گزینه جایگزینی نزدیک (یا یک قلم کاملاً متفاوت) را مشاهده خواهید کرد ، که همان تأثیری را که شما می خواهید نخواهند داشت.

بازی با فونت مانند بازی با آتش است. بعضی اوقات می تواند یک مسابقه را در یک صفحه وب روشن کند ، یک درخشش متن زیبا. بارهای دیگر ، می تواند کل خانه را آتش بزند. ” – Lorelle of cameraontheroad.com.

می توانید قلم های خود را کنترل کنید (و جلوه مورد نظر خود را ایجاد کنید) با صفحه سبک خود. در موضوع شما ، شیوه نامه معمولاً است سبک.css فایل. می توانید از این پرونده برای کنترل رنگ قلم ها ، نوع قلم / فونت-خانواده ، اندازه فونت و جنبه های دیگر فونت انتخاب شده خود استفاده کنید.

موارد زیر مثال خوبی است:

#menu {font-family: Arial، Helvetica، Sans-serif، Verdana، "Times New Roman"؛ اندازه قلم: 0.8em؛ رنگ سیاه؛}

کد فوق اندازه فونت را در منو شما 0.8 گرم قرار داده و رنگ آن را سیاه می کند. همچنین قلم را روی Arial تنظیم می کند ، اما اگر کاربر Arial را در دستگاه خود نداشته باشد ، Helvetica کنترل می کند. اگر آنها Helvetica یا Arial نداشته باشند ، Verdana ، Sans-serif یا Times New Roman را به دست خواهند گرفت..

با کنترل فونت ها می توانید ظاهر و احساس سازگار تری ایجاد کنید.

با این حال ، برای حل مشکل ناسازگاری قلم یک بار و برای همیشه ، می توانید از فونت های تعبیه شده استفاده کنید. با استفاده از فونت های تعبیه شده (یا خارجی) ، کاربر نیازی به فونت روی دستگاه خود ندارد.

علاوه بر این ، کار آسانی است.

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

@ font-face {font-family: Museo300؛ قالب src: url ("قلم / museo300-منظم.تف"): ("Truetype")؛ font-weight: normal؛}

توجه: شما باید نام و محل قلم خود را تعریف کنید. در مثال بالا “Museo300” قلم است ، که در پوشه ای به نام “فونت ها” ذخیره شد..

برای مثال برای استفاده از فونت در وب سایت خود ، می توانید بنویسید:

body {font-family: Museo300؛

می توانید برای هر عنصر موجود در وب سایت خود از یک فونت تعبیه شده استفاده کنید. مثلا…

#menu {font-family: Museo300؛

… Museo300 را در فهرست شما تنظیم می کند.

روش فوق بدان معنی است که شما باید قلم را بارگیری کرده و همین کار را روی سرور خود بارگذاری کنید ، که اگر از من بپرسید بسیار خسته کننده است.

با این حال, یدیگر نیازی به بارگیری فونتهای خارجی که می خواهید استفاده کنید نیست.

شما به راحتی می توانید از بخش (header.php) فونت های خود به این ترتیب پیوند کنید:

خط بالا را چگونه و از کجا اضافه می کنید؟ باید باز کنید صفحه مدیریت وردپرس -> ظاهر -> ویرایشگر -> header.php

اگر نمی خواهید و یا نمی توانید پرونده header.php خود را ویرایش کنید ، کافی است فونت ها را با وارد کردن خط زیر در وارد کنید سبک.css:

import url (http://fonts.googleapis.com/css؟family=over+the+rainbow)؛

مثال بالا به شما امکان استفاده می دهد بیش از رنگین کمان قلم را از Google در هرجای سایت خود قرار دهید. به عنوان مثال ، اگر می خواهید در سراسر وب سایت خود از Over The Rainbow استفاده کنید ، می توانید از این کد استفاده کنید:

body {font-family: "Over Rainbow"؛}

Google فراهم می کند بیش از 600 خانواده فونت رایگان, پس بازی کن!

بروزرسانی (07/12/13): اگر می خواهید فونت های Google را به راحتی به سایت وردپرس خود اضافه کنید ، می توانید از این موارد استفاده کنید افزونه Google typography. به غیر از این ، می توانید اطلاعات بیشتری در مورد قلم های گوگل و نحوه اجرای آنها در این بهبود تایپوگرافی وب سایت وردپرس خود با فونت های گوگل توسط تام ایور کسب کنید.

منابع بیشتر در مورد بازی با فونت ها

افزونه های WordPress برای اضافه کردن فونت ها

و برای کسانی که نمی خواهند کد بنویسند ، همیشه می توانید افزونه WordPress را نصب کنید تا برخی از بلند کردن های سنگین را برای شما انجام دهد. در اینجا چند مورد از افزونه های مشهور فونت رایگان از WordPress.com آورده شده است:

خوش میگذرد؟ بیایید حرکت کنیم …

 تاریخ و زمان قالب بندی

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

خبر خوب ، می توانید ویرایش کنید این خط کد و همچنین خوانندگان خود را متعجب کنید.

در خود داشبورد WP, هدایت به ظاهر, و بعد به ویرایشگر مطابق شکل زیر:

تاریخ قالب بندی

پس از آنجا ، می توانید لیستی از پرونده های .php خود را در سمت راست مشاهده کنید:

پست واحد

بر روی پست تنها (single.php) کلیک کنید و پس از باز شدن ، نوار جستجو را با فشار دادن باز کنید Ctrl + F. در نوار جستجو که ظاهر می شود ، تایپ کنید:

زمان

بلافاصله خطی را مشاهده خواهید کرد که ممکن است چیزی شبیه به این باشد:

اکنون منطقه ای که می خواهید ویرایش کنید (“F Y”).

به من اجازه می دهم از این بخش گوشت را بیرون بیاورم تا چیزی از گوشت را برای شما گاز بدهم.

“F” در (‘F Y) مخفف است نام کامل ماه و “Y” نمایانگر آن است سال در 4 رقم. بنابراین ، اگر از (‘F Y) استفاده می کنید ، تاریخ شما مانند خواهد بود:

سپتامبر 2013

اگر کاما را بین F و Y پرتاب کنید ، باید چیزی مانند:

سپتامبر 2013

اگر مایل به اضافه کردن روز و سایر عناصر هستید ، می توانید از نویسه های زیر استفاده کنید:

l = نام کامل روز (پرونده کوچک L)

F = ماه

j = روز ماه (تاریخ)

Y = سال در 4 رقم

y = سال در 2 رقم

شخصیت های بیشتری را می توانید در جدول زیر مشاهده کنید:

جدول تاریخ قالب بندی

و در اینجا ، چند مثال:

قالب بندی نمونه های تاریخ

همیشه به یاد می آورد که فقط نویسه های موجود در براکت ها را ویرایش کنید (“F Y”) و, یادداشت بردار, علائم نقل قول را حذف نکنید. به راحتی می توانید از شخصیت های زیادی استفاده کنید تا به اثری که می خواهید برسید و به یاد داشته باشید که هنگام انجام کار همه چیز را ذخیره کنید.

از این گذشته ، با حذف … می توانید از شر تاریخ خلاص شوید …

… مانند من خیلی وقت پیش در وبلاگ خود انجام دادم. �� اکنون ، تمام چیزی که می گیرم این است ارسال شده توسط فرد در چنین مقوله ای …. هیچ تاریخی به هیچ وجه.

آیا برای قسمت بعدی سوخت دارید؟ شما بهتر باشید.

عملکرد_time را پیدا نکردید?

این خوب است ، زیرا بسیاری از مضامین در روزها به جای تابع__ (()) از تابع_date () استفاده می کنند ، که در واقع عمل بهتری است. اگر موضوع شما از تابع_date () استفاده می کند ، مجبور نیستید ویرایش دیگری انجام دهید زیرا می توانید به سادگی نحوه نمایش داده های خود را در داشبورد خود تحت “تنظیمات -> عمومی” تغییر دهید..

با استفاده از تصاویر

این احتمالاً ساده ترین (و کوتاه ترین) قسمت این آموزش است. اما اگر واقعاً در وردپرس تازه کار هستید ، اضافه کردن تصاویر می تواند یک چالش باشد.

WordPress به شما امکان می دهد هنگام ایجاد یک پست یا صفحه جدید ، تصاویر را از طریق ابزار بارگذاری یا (دکمه افزودن رسانه) اضافه کنید. تمام کاری که شما باید انجام دهید این است که مکان نما را در جایی قرار دهید که می خواهید تصویر در پست یا صفحه شما قرار داشته باشد ، و سپس روی “افزودن رسانه” کلیک کنید.

رسانه را اضافه کنید

پس از افتتاح برنامه بارگذاری ، می توانید جزئیات دیگری مانند عنوان ، اندازه ، پیوندها و تراز اضافه کنید.

ابزار بارگذاری

این قسمت در سمت راست ابزار بارگیری یافت می شود.

برای کسب اطلاعات بیشتر در مورد اضافه کردن تصاویر ، لطفا منابع زیر را بررسی کنید:

و اگر مطمئن نیستید که کجا می توانید برخی از تصاویر رایگان عالی را پیدا کنید ، پس از ارسال نامه ما ، بهترین منابع تصویری برای وردپرس را بررسی کنید.

دیدن؟ من به شما گفتم که این کوتاهترین be خواهد بود

اضافه کردن یک فاویکون

قبل از اینکه تصاویر را کاملاً فراموش کنیم ، بگذارید یک مورد دلخواه برای سایت WordPress خود ایجاد کرده و اضافه کنیم. نماد مورد علاقه (یا نماد مورد علاقه ها) نمادی است که برای نشانه گذاری یک وب سایت استفاده می شود.

Favicon به خوانندگان شما کمک می کند وب سایت شما را بصری شناسایی کنند.

به طور کلی ، یک favicon یک پرونده گرافیکی مربع 16 X 16 پیکسل با پسوند .ico است. پسوند مخفف icon است.

نحوه ایجاد Favicon

می توانید موارد دلخواه خود را بصورت آنلاین یا با استفاده از برنامه های ویرایش تصویر مانند GIMP یا هر نوع دیگری که به شما امکان ذخیره فایل های .ico را می دهد ، بسازید. بیشتر خدمات آنلاین رایگان است.

در حالی که تصویر معمولاً بسیار ناچیز است (16 در 16 پیکسل) ، favicon باید وبلاگ شما را به طور کامل نشان دهد. تصویر یا متنی که برای ایجاد موارد دلخواه خود استفاده می کنید باید نمایانگر تجارت آنلاین شما باشد.

اگر از ویرایشگر تصویر استفاده می کنید:

  • برای اطمینان از مربع بودن تصویر ، فضای را برش داده و اضافه کنید
  • تغییر اندازه در اندازه 16 x 16 پیکسل ، و
  • تصویر را به عنوان ذخیره کنید favicon.ico

خدمات آنلاین که می توانید از آنها برای ایجاد موارد دلخواه استفاده کنید عبارتند از (اما به آنها محدود نمی شود):

بعد از اینکه مورد علاقه خود را ایجاد کردید ، به شما امکان می دهند آن را در رایانه خود بارگیری کنید ، بنابراین نگران نباشید.

نحوه نصب Favicon خود در وردپرس

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

برای این آموزش ، من از faviconer.com استفاده کردم تا برای وبلاگ خود و Filezilla یک مورد علاقه ایجاد کنم تا موارد دلخواه موجود را حذف کنم.

با استفاده از پرونده favicon.ico ، همین مورد را در پوشه اصلی موضوع خود بارگذاری کنید. این پوشه ای است که موضوع فعلی شما در آن ذخیره شده است.

سپس یک نسخه دیگر از favicon خود را در پوشه root (معمولاً public_html) یا دایرکتوری اصلی که سایت شما در آن قرار دارد بارگذاری کنید ، تا بتوانید در هنگام تایپ موارد دلخواه مورد علاقه خود را مشاهده کنید. این به طور خودکار موارد دلخواه شما را به فیدهای شما اضافه می کند.

وقتی بارگذاری تمام شد ، زمان آن رسیده است که favicon.ico خود را فعال کنید. این کاری است که شما باید انجام دهید:

Favicon خود را با استفاده از افزونه اضافه کنید

بهترین راه برای افزودن علاقه مندی شما استفاده از افزونه است. من توصیه می کنم از “همه در یک فاویکون“افزونه برای استفاده پیشرفته تر برای یک رویکرد بسیار ساده که می توانید از آن استفاده کنید”ساده ترین فاویکون“افزونه ای که هیچ گزینه برگشتی ندارد ، فقط باید فایلی به نام favicon.ico را در مکان صحیح روی سرور خود بارگذاری کنید.

همه در یک مورد علاقه

favicon را به صورت دستی به الگوی خود اضافه کنید

برخی از افراد ممکن است ترجیح دهند (حتی اگر این بهترین راه نیست) برای افزودن موارد دلخواه خود به صورت دستی به الگوی خود ، برای انجام این کار مراحل زیر را دنبال کنند:

  • وارد شوید داشبورد
  • هدایت به ظاهر
  • سپس به ویرایشگر (ویرایشگر تم)
  • پیدا کنید و باز کنید header.php (سربرگ) فایل

این خط را به پرونده هدر خود اضافه کنید (ترجیحاً در قسمت بالای جایی که سایرین را مشاهده می کنید) برچسب ها:

ذخیره یک بار انجام شد. 

مرورگر خود را تازه کنید تا تغییرات جدید خود را ببینید.

در این مرحله ، شما باید بتوانید رنگ های خود را تغییر دهید ، فونت های بهتری انتخاب کنید ، تاریخ و زمان قالب بندی کنید ، از تصاویر استفاده کنید و یک فاویکون اضافه کنید.

نتیجه

بحث در مورد طراحی مجدد سایت وردپرس شما بسیار زیاد است که تلاش برای پوشاندن همه چیز در یک پست منفرد است..

برای اینکه بیشترین سود را برای شما داشته باشید ، بهتر است آموزش را به چند قسمت تقسیم کنید (این قسمت 1 است). ما روزهای آینده ترفندهای طراحی مجدد بیشتری را به اشتراک خواهیم گذاشت ، بنابراین مراقب باشید. هدف از این آموزش ها کمک به شما در ایجاد بهترین سایت وردپرس تا کنون است و به شما احساس خوشبختی می دهد زیرا همه این کارها را خودتان انجام داده اید.

اگر می خواهید نظر (های) خود را به اشتراک بگذارید یا چیزی را به بحث اضافه کنید ، لطفا در صورت تمایل نظر خود را در بخش نظرات زیر بگذارید!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map