X
تبلیغات
صفحه اول تماس با ما RSS قالب وبلاگ
معرفی مطالب جالب با لینک منبع
معرفی مطالب جالب با لینک منبع
امین طیرانی پنجشنبه ۱۷ اسفند ۱۳۹۶


طراحی سایت در مشهد

فراگیری پباده سازی تارنما از اساس – نصیب دوم با درود سرویس تمامی دوست داران به يادگيري . با اعتنا به استقبال شما عزيزان از اين مقاله‌ها سعي مي كنم با اعتنا و سرعت بيشتري به نوشتن ادامه دهم .

بازهم اعلام مي كنم که ترجمه خط به خط کتاب ارائه نمی‌شود و چیزی که تحت عنوان برداشت فردی اینجانب یک  از کتاب می‌باشد در قالب مقاله ها آموزشی برای شما ابلاغ خواهد شد و مسلما با بازخوردی که از خواننده‌گان خواهم گرفت کیفیت فعالیت و نیز چنین وسعت عمل را ارتقاء خواهم بخشید . و البته ادامه یادگرفتن .

بهینه سازی سایت

فصل دوم


Your First Web Pages


در اين فصل شما مي توانيد اولين کاغذ اینترنت خودتان را اخلاق نماييد و با XHTM آشنا خواهيد شد و گام به گام كارهاي خویش را در مرورگر آزمایش ميكنيد .

بگذاريد دقيق شويم ! طراحي اینترنت سايتی كه شما مي بينيد به سه لايه اصلي تقسيم مي شود :


design - web - 06 . gif

يادگيري اين سه لايه شما‌را به يك طراح تبديل ميكند!

لايه نخستین لايه محتوي است كه نظیر شاسي ماشين است و دربرگیرنده تگهاي متفاوتي مي باشد . لايه دوم لايه نمايش است كه به موادتشکیل دهنده HTML شكل و ظواهر مي دهد و لايه سوم لايه خلق و خوی است كه حركت و پويايي صفحه های را دربرگیرنده مي شود .

چيزي كه در اين كتاب یادگرفتن داده مي شود مرتبط با 2 لايه HTML و CSS است .


ديدن Source برنامه :



ديدن كد برنامه مي تواند به يادگيري شما سرعت ببخشد اما بايد در گزینش اینترنت سايت خویش اعتنا نماييد تا غلط آن‌ها مسير يادگيري شمارا تغيير ندهد . روش كار بدين صورت است كه موس را درروي ورقه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source يا view source را بزنيد .

بايد برگه اي مثل زير در فايرفاكس ببينيد :


design - web - 07 . jpg

يا در IE

design - web - 08 . jpg


موادتشکیل دهنده اصلي يك صفحهHTML :


یک DocType

یک tag

یک tag

یک

” Content - Type content= ” text/html; charset=utf - 8″/>






درحال حاضر مي خواهيم با تك تك اين عنصرها آشنا شويم :

داك تايپ DocType : Document Type Definition

اولين آيتم ورقه است فارغ از مسافت . اين يك ضابطه است .

همانطوري كه فايل word 2007 در نمايش در 2000 در گیر مشكل مي شود HTML ها با داك تايپ هاي مختلف نیز نمايش متعدد در مرورگرها خواهند داشت .

در واقع اين داك تايپ است كه به مرورگر مي گويد اين مدرک از چه نوعي است و بايد به چه ترتيب Render شود . روش رندر شدن و تفاوت هاي آن‌ها بايد در تراز رشته اي تري مطرح شود .

داك تايپ ها نیز در حین زمان به‌وجود مي آيند يعني نظیر word جور هاي جديدي روي قبلي ها عرضه مي شوند مثل HTML5 كه به تازگي ارائه شده شده‌است .

براي ديدن داك تايپ هاي جان دار به اين نشانی بريد http : //reference . sitepoint . com/html/doctypes




“ - //W3C//DTD XHTML 1 . 0 Strict//EN ”

“ http : //www . w3 . org/TR/xhtml1/DTD/xhtml1 - strict . dtd “ >


به کدهای داك تايپ توجه نماييد : ما در اين خط مي گوييم گونه مدرک چيست و آدرسي كه بايد به اين مدل مدرک در اینترنت سايت كنسرسيوم جهاني اینترنت World Wide Web Consortium یا این که W3C , اشاره كند کدام است .

اکنون دو گونه داكتايپ می باشند كه استفاده بيشتري دارا هستند Transitional و Strict

همانطوري كه گفتم فعلا دنبال تفاوت اين داك تايپ ها نباشيد به آن نیز خواهيم رسيد .

تاكيد ميكنم : اولين آيتم برگه است فارغ از مسافت . اين يك ضابطه است .




عنصرها HTML :

پیشین از اين كه موادتشکیل دهنده HTML را شرح دهم بايد با معنی تگ ( tag ) آشناشويد . تگ يعني اسمي كه ميان اين دو <> قرار گيرد و اسم تگ به عبارتی متني است كه بين اين دو <> قرار مي گيرد


تگ HTML

تگ HEAD


تگ ها مي توانند دربرگیرنده چندین attribute ( خصوصیت ) باشند :


” http : //www . w3 . org/1999/xhtml ” dir= ” rtl ” >


dir يك اسم attribute است و rtl , value ( اندازه ) آن است كه بين ” ” قرار گرفته است .

design - web - 09 . gif


تگ ها به دودسته container و empty تقسيم مي شوند . تگ هاي container دربرگیرنده يك تگ بازشونده و يك تگ بسته شونده میباشند به نمونه بالا اعتنا نماييد HTML گشوده شده و بسته شده‌است . تگهاي empty متعدد میباشند مثل نمونه زير


” images/test . jpg ” alt= ” test ” />

بهینه سازی سایت



تگ هاي empty را مي توان به طور container استفاده كرد ولي در داك تايپ هاي xhtml توصيه شده‌است كه تگ هاي empty را به به عبارتی شكل empty بنويسيم

در استفاده از تگ ها بايد دانيد كه از چه نوعي می‌باشند تا مدرک شما مبتلا error نشود بعنوان نمونه در صورتیکه تگ div را به طور empty بنويسيم مبتلا error می شویم .

نگران نباشيد كم كم همگی آن‌ها را خواهيد فراگرفت . بياييد همين حال حاضر تو اينترنت عبارت روبرو را کاوش كنيم :


empty tag in html


بسيار عالي شما نیز اين نتايج را پيدا كرديد :






اين را گفتم كه هيچ وقت دنياي اینترنت و کاوش را فراموش نكنيد .

غير از داك تايپ ها تمامي موادسازنده کاغذ باطن تگ HTML است كه مشتمل بر 2 بخش مي شود head و body

عنصر HAED

اين يك تگ container است و در بالاي گواهی پیشین از body قرار مي گيرد و دربرگیرنده اطلاعاتي در باره کاغذ است نظیر title , meta , css و … . .




” Content - Type ” content= ” text/html; charset=utf - 8″/>



عنصر title :

يك تگ container است كه نوشته میانه آن در تیتر ( Title ) بالاي ورقه قرار ميگيرد :


به تایتل درسایت عبد دقت فرمائید :


design - web - 10 . gif

مورد ها استفاده ديگر :

• اين تايتل در حین مينيمايز كردن پنجره در taskbar windows قابل مشاهده است

• در طول بوكمارك كردن برگه با اين تیتر در ليست ما ذخيره مي شود

• براي معرفي آن کاغذ است

• براي موتورهاي کاوش نیز حائز اهميت مي باشد چیزی که در با صرفه سازی سایت اینترنت اسکالا نیز مستعمل شده‌است




عنصر meta :

متا تگ يك تگ empty است و براي دلايل متفاوتي استفاده مي شوند داده ها اضافي كه در مرورگر نمايش پيدا نمي كند . به صورت نمونه براي اسم نويسنده ويا حق كپي رايت و يا مدل كاراكتر و … .

Css و javascript نیز در head قرار ميگيرند كه سازه به نياز استفاده ميشوند ولی براي جاوااسكريپت ميتوان يك تفاوتهايي در پباده سازی های ماهر قائل شد . به صورت نمونه سورسی که در پباده سازی وبسایت فوق مصرف شده شده‌است را مشاهده نمائید . جاوا اسکریپت در ذیل کاغذ نوشته شده شده‌است .




موادسازنده body :

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد : تيترها , پاراگراف ها , تصاوير و …… .

در نصیب بعدي به صورت عملي با نیز يك اینترنت سايت مي سازيم!


ادامه داراست در‌صورتی‌که موردپسند قرار گیرد!


امین طیرانی پنجشنبه ۱۰ اسفند ۱۳۹۶


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

به نظرتان چرا با وجود پلاگین هایی با عملکردهای شبیه با پلاگین های حریف , ساخت می شوند!

هر پلاگین ای که ساخت میگردد صدرصد یک خصوصیت تازه یا این که یک ابتکار تازه را به همراه دارااست و ضمن این که پلاگین های شبیه به نیز میتوانند در وبسایت های گوناگون سود ی بهتری را به همراه داشته باشند .

ساخت فرم در وردپرس با Formidable Forms


formidable - ساخت فرم در وردپرس


این پلاگین کارکرد فراوان سادگی دارااست و شما با کار drag and drup ( یعنی روی المان متبوع کلیک فرمایید و آن را روی بخش متبوع بکشید و رها کنید! ) میتوانید در پهنا یک سری ثانیه به ساخت فرم در وردپرس بپردازید .

پلاگین ی Formidable Forms تا کنون بیشتراز ۳۰۰۰۰۰ نصب فعال را در مخزن وردپرس از آن خویش نموده است و می توان از آن تحت عنوان دوست داستنی ترین افزونه ها در ساخت فرم یاد کرد .

آغاز فعالیت


برای آغاز فعالیت ابتدا پلاگین را اخذ نموده و از بخش پلاگین های تارنما خویش آن را نصب فرمایید . بعد در بخش پیشخوان وبسایت شما چکیده تازه با اسم Formidable Forms بیش تر شده‌است , روی آن کلیک نمایید تا به برگه ی پیکربندی پلاگین بروید .


form - ساخت فرم در وردپرس

ساخت او‌لین فرم


add new - ساخت فرم در وردپرس


ابتدا برای ساخت یک فرم روی مورد ی متبوع کلیک فرمایید .


enter info - ساخت فرم در وردپرس


همانطور که در تصویر بالا مشاهده می‌کنید این پلاگین برای تولید فرم ۴ بخش مهم داراست که بررسی آن میپردازیم :


بخش ۱ : در فیلد مرتبط با به‌این بخش می بایست اسم فرم را وارد نمایید .

بخش۲ : درین بخش فیلدها و یا این که محتوایی که می‌خواهید در فرم نمایش دهد را مشاهده میکنید , که برای افزودن هر کدام به فرم خودتان بایستی روی آن کلیک نمایید و آن را در بخش ۳ رها فرمایید .


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


بخش۳ : این بخش نیز که در بخش اشاره کردیم برای نمایش مورد ها و محل ورود های نمایشی برای استفاده کننده می‌باشد .

بخش۴ : در غایت با اعمال کلیه پیکربندی و تولید فرم مورد نظرتان روی آیتم ی update برای ذخیره فرم استفاده فرمائید . با آیتم ی preview نیز می‌توانید پیش نمایشی از فرمتان را ملاحظه کنید .

Settings


از این بخش نیز می‌توانید پیکربندی ذی‌ربط را برای هنگامی که روی دکمه ی ارسال کلیک شد تهیه فرمائید .


settings - ساخت فرم در وردپرس


به عنوان مثال می‌توانید تهیه و تنظیم فرمائید هنگامی استفاده کننده روی مورد ی ارسال فرم کلیک کرد یک پیام نمایش داده شود که می‌توانید محتوای نمایشی را در تصویر بالا ببینید . این‌که درخواست بصورت ایجکس ( ارسال درخواست فارغ از بار گذاری ورقه ) ارسال شود یا این که خیر . همینطور استایل دکمه و محتوای متنی آن . خب بعداز انجام پیکربندی لازمه دکمه ی update را برای ذخیره تغیرات کلیک فرمائید . تا ساخت فرم در وردپرس صورت پذیرد .

استفاده از شورت کد


حالا فرم تماس با ما متبوع شما تاسیس شده است و شما میتوانید این فرم را بصورت کد شورت کد در نوشته/برگه سایتتان به نمایش بگذارید . درحال حاضر شورت کد مورد نظرتان بایستی آن را از گوشه ای که در تصویر بالا مشاهده می‌کنید , نسخه برداری فرمایید و در برگه/نوشته بچسبانید .


show shortcode - ساخت فرم در وردپرس


ابتدا روی آیتم show کلیک فرمائید و آن گاه شورت کد را که کدی بصورت [formidable id=8] است را نسخه برداری فرمایید . در اینجا اینجانب برای این‌که فرم متبوع را در تارنما به نمایش بگذارم شورت کد متبوع را برای ساخت فرم در وردپرس در ورقه تماس با ما تارنما نسخه برداری می کنم .


put shortcode - ساخت فرم در وردپرس


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


styles - ساخت فرم در وردپرس


هم اکنون از ستون کناری که بصورت زیر مشاهده می‌کنید . همگی تب ها را گشوده نمائید و هر جا آیتم ی Align مشاهده کردید آن را برابر right قرار دهید . دقیقا همان طور که در تصویر زیر مشاهده می‌کنید .


feild description - ساخت فرم در وردپرس

بهینه سازی سایت


خب درحال حاضر میتوانیم کاغذ ی متبوع را در خروجی مشاهده کنیم . که بصورت زیر نمایش داده میشود .

طراحی سایت در مشهد

result - ساخت فرم در وردپرس


به‌این صورت میتوانید به ساخت فرم در وردپرس به طور تماما مناسب بپردازید .



امین طیرانی چهارشنبه ۹ اسفند ۱۳۹۶

بهینه سازی سایت

سلام سرویس همه یوزرها عزیز همیار وردپرس ;

رویکرد های متنوعی جهت تولید صمیمیت بیشتر سایت با یوزرها موجود است . ساخت تخفیف های گروهی , سایت های خبری ساخت تعرفه هایی با قیمتی مطلوب جهت تبلیغات در وبسایت و …

ولی آیا تا به اکنون تامل نموده اید که برای سایت های معمول چه راهی می توان ارائه کرد؟ امروزه برخی از قالب های وردپرس پباده سازی شده چکیده را در برگه ی ابتدا وب سایت تعبیه می نمایند که به ما تعداد پست ها , تعداد نظرها , تعداد یوزرها و… را نشان میدهد که نوعی آمار است . هم اکنون در صورتی بخواهیم آماری از عمل ها در وردپرس را نمایش دهیم بایستی چه کنیم؟ با ما همراه باشید…

آماری از کار ها در وردپرس با Counter Widget


wordpress - hamyarwp - آماری از کار ها در وردپرس


این پلاگین کاربردی وردپرس در مخزن بزرگ وردپرس , در جور بندی پلاگین کاربردی به ثبت رسیده است و آماری از عمل ها در وردپرس را نمایش میدهد .

تا کنون بیشتراز ۱۰۰۰ دانلود و نصب و راه‌اندازی داشته است .

توضیحات بیشتر!!!


این پلاگین بوسیله Cyberbundle پباده سازی و برنامه نویسی شده‌است و از پایانی بروزرسانی آن حدود 1‌سال هم می گذرد . یکی خصوصیت های این پلاگین کاربردی وردپرس بی نقص بودن آن در ورژن اولیه است که کمتر پلاگین ای چنین قابلیتی دارااست .

تجهیزات پلاگین

بهینه سازی سایت

نمایش تعداد مقاله ها نشر داده شده

نمایش تعداد ایده ها

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

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


یادگرفتن عمل با پلاگین


ابتدا آخری ورژن پلاگین را از انتهای همین مقاله آموزشی دانلود و آن گاه در وردپرس تارنما خویش نصب و راه اندازی فرمائید . بعداز نصب و فعال‌ساز‌ی , نفسی عمیق کشیده و وارد پیشخوان وردپرس شده و از منو های جانور به نصیب نمایش مراجعه کرده و از زیر منو های مو جود روی مورد ابزارک کلیک فرمایید تا نمایش آماری از عمل ها در وردپرس را داشته باشید .


open - settings - hamyarwp - آماری از عمل ها در وردپرس


با ورود به‌این بخش ما می توانیم پیکربندی ذی‌ربط را انجام دهیم . به تصویر زیر اعتنا فرمائید :


در بخش۱ ما مشاهده می‌کنیم که ابزارک جدیدی به عنوان “ Counter Widget ” طولانی تر شده‌است و روی آن کلیک کرده و به سایدبار متبوع منتقل می‌کنیم .

در بخش۲ مشاهده می‌کنیم که پیکربندی این پلاگین کاربردی وردپرس نمایان شده‌است . در‌این نصیب از پیکربندی , یک سری TextBox موجود هست که ما می‌توانیم محتوای آن را به متن های مطلوب خویش تبدیل کنیم . در صورتی توجه فرمائید مورد ای در منطقه پایینی TextBox ها موجود هست و بیان‌کننده این است که چنانچه شما نمی خواهید این آیتم نمایش داده شود , اینجا را کلیک فرمایید . به نمونه زیر دقت نمائید :

نمونه


در سایت اینجانب مدل بندی خاصی نیست و نمی‌خواهم که تعداد نوع بندی های جانور سایت اینجانب نمایش دهد به همین باعث روی مورد Hide Category Count کلیک می کنم .


settings - hamyarwp - آماری از کار ها در وردپرس


و اکنون زمان آن رسیده است که روی دکمه ذخیره کلیک کنیم و وارد ورقه اساسی وبسایت شویم و تغییرات ساخت شده در جهت آماری از عمل ها در وردپرس را مشاهده کنیم :


out - put - hamyarwp - آماری از کار ها در وردپرس



امین طیرانی سه شنبه ۸ اسفند ۱۳۹۶
سلام دوستان خوب ;
تمامی ما نیتی از ساخت یک وب سایت داریم و در غایت قصد همگی ما ایجاد محتوا و وارد کردن داده ها است . شما میدانید برای وارد کردن یک متن چه فضایی از مقر داده گرفته می شود؟
این سوال سبب ساز می‌شود از همین جا باصرفه سازی را آغاز کنید! شما می‌توانید با انجام عملیات فشرده سازی قابلیت ارتقا سرعت وردپرس را آماده فرمایید .

برای این که بتوانید باصرفه سازی و ارتقا سرعت وردپرس را از به عبارتی اولِ عمل سایت خویش انجام دهید بایستی عملیات فشرده سازی پوشه ها را هم انجام دهید . این عملیات را می‌توانید با امداد پلاگین Check and enable GZIP compression انجام دهید . یک پلاگین دوچندان معمولی و در عین حالا کاربردی است .
نصب و فعال سازی پلاگین

برای نصب و فعال سازی پلاگین می‌توانید از بخش اضافه کردن مبادرت فرمایید و پلاگین را فعال فرمایید . بعد از راه اندازی پلاگین از نصیب ابزارها می‌توانید مورد GZIP compression را ملاحظه کنید که مرتبط با پلاگین است .

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

بدین صورت شما می‌توانید به میزان قابل توجهی قابلیت و امکان ارتقاء سرعت وردپرس را مهیا نمایید و با فشرده سازی فولدر هایی که به طور نابه جا فضای متعددی را در مقر داده یا این که هاست اشغال می نمایند کم فرمائید . این خویش یک رویکرد اصولی در با صرفه سازی تارنما وردپرس به حساب می‌آید و در کنار فاکتورهای دیگر باصرفه سازی دارای اهمیت است . پس آن را دور از شوخی بگیرید و استفاده کنید!