قالب وردپرس

آموزش گام به گام طراحي قالب وردپرس : حتما تا كنون كلمه CMS يا سيستم مديريت محتواي وردپرس به گوش شما خورده است يا اينكه ممكن است شما دانش كدنويسي html را بلد باشيد اما تاكنون با سيستم مديريت محتواي وردپرس كار نكرده باشيد. ما در اين آموزش به شما خواهيم گفت سيستم مديريت محتواي وردپرس چيست؟ چه مزايايي دارد؟ و اينكه زماني كه سايت استاتيك خود را با وردپرس دايناميك و پويا مي كنيد، چه امكاناتي خواهيد داشت؟ اما هدف اصلي اين مقاله شروع آموزش هاي ديناميك كردن سايت html به كمك توابع php مي باشد. در اين آموزش ها، بيشتر برروي آموزش توابع php در وردپرس تمركز خواهيم كرد؛ بنابراين شما بايد قبل از آموزش php، پيش نيازهايي لازم را فرابگيريد و اين به شما كمك خواهد كرد تا طي اين مقالات آموزشي مفاهيم را بهتر متوجه شويد.

وردپرس چيست؟

سيستم مديريت محتوا (CMS) وردپرس، اين امكان را براي شما فراهم مي كند تا بتوانيد به مديريت سايت خودتان مثل مطالب، قالب ها و چيدمان و افزونه ها (Plugin) و طرح سايت ( Design) و همچنين كنترل بخش مديريت و سطح دسترسي كاربران (مثل مديران و نويسنده ها و تازه وارد ها) بپردازيد. در واقع شما با استفاده از اين CMS توانايي كنترل تمامي بخش هاي سايت خود را خواهيد داشت.

چرا از وردپرس استفاده كنيم؟

1) متن باز بودن و رايگان بودن وردپرس:
اولين مزيت اين CMS، متن باز بودن آن است يعني بسياري از توسعه دهندگان در سراسر دنيا به راحتي مي توانند افزونه هاي مختلفي را براي وردپرس آماده كنند و قابليت هاي بيشتري را به آن اضافه كنند. همچنين اين سيستم مرتب بروزرساني مي شود ومشكلاتش برطرف مي گردد و شما مي توانيد از داخل پنل مديريت سيستم خودتان بروزرساني كنيد. يك نكته خوب ديگر اين است كه وردپرس كاملاً رايگان مي باشد.
2) هماهنگي با موتورهاي جستجو:
دومين ويژگي وردپرس، امكانات وردپرس است به طوري كه شما با كمي فعاليت روي سايتتون و كار كردن روي كلمات كليدي مد نظرتان مي توانيد رتبه ي خوبي در موتورهاي جستجو درمقايسه با ساير سايت ها داشته باشيد.
3) امنيت خوب:
از آنجايي كه وردپرس تقريباً 1/4 كل سايت ها رو شامل مي شود پس خيلي طبيعي است كه هدف بسياري از هكر ها قرار ميگيرد. اما بسياري از مهندسين امنيت با پيدا كردن مشكلات امنيتي آن، امنيت وردپرس را افزايش داده اند.

ادامه مطلب

تلگرام يك سرويس پيام‌ رسان متن‌ باز چندسكويي مبتني بر رايانش ابري است كه كاربران تلگرام مي‌توانند پيام‌ها ، تصاوير ، ويديو و اسناد تبادل كنند. تلگرام يكي از سريعترين  و جديدترين مسنجر در سطح وب باشد. آقاي امير موسوي افزونه وردپرس ساخته اند كه با كمك آن مي توان سايت وردپرس خود را به تلگرام وصل كرده و تمامي پيام ها و اتفاقات را چك كرد. با ما باشيد.

 عملكرد افزونه

در اين افزونه هر ايميلي كه از سمت سايت شما ارسال شود ، متن آن نيز به تلگرام شما ارسال خواهد شد. حتي اگر كسي از طريق فرم تماس براي شما ايميلي ارسال كند شما بر روي تلفن همراه خود ، در نرم افزار تلگرام آن را مشاهده خواهيد كرد. اين افزونه پيام ها را در جايي ذخيره نمي كند و بلافاصله از سرور حذف خواهد شد.

افزونه را در مسير نمايش » افزونه ها نصب و فعال سازي كنيد. پس از فعال سازي افزونه ، پيامي در بالاي صفحه پيشخوان مشاهده خواهيد كرد كه بصورت ” كد api_token شما تنظيم نشده است. لطفا به تنظيمات TWP برويد و آن را تنظيم كنيد. ” مي باشد. شما براي تنظيم كردن اين مورد بر روي گزينه ي ” تنظيمات TWP ” در سمت راست پنل وردپرس خود كليك كنيد.

ادامه مطلب

Redirect Persian يك اسكريپت انتقال دهنده لينك و اسكريپت فارسي مي باشد كه با استفاده از اين اسكريپت مي توانيد لينك هاي خروجي رو با يك صفحه اي ديگر از سايت خود انتقال دهيد كه اين هم براي سئو مناسب هست به طوري كه لينك هاي خروجي شما نوفلو مي شود و هم كلاس كاري سايت شما بالا ميرود. اين اسكريپت بعد از اينكه كاربر روي لينك مورد نظر كليك ميكند كاربر را به صحفه انتقال دهنده لينك هدايت مي كند در اين صفحه سايت مورد نظر بصورت آي فريم نمايش داده مي شود كه بعد از گذشتن 5 ثانيه كاربر ميتواند آي فريم را نيز حذف كرده و سايت بصورت كلي مشاهده كند. با ما همراه باشيد.

راهنماي نصب و راه اندازي :

اگر ميخواهيد كار شما شيك باشه ابتدا يك ساب دامين با نام go يا redirect يا هر اسمي كه خودتان انتخاب كرديد باز كرده و فايل اسكريپت را در پوشه مورد نظر آپلود كنيد. خوب حالا اسكريپت شما آماده به كار است ميتوانيد بصورت زير لينك هاي خروجي سايت خود را زيبا سازيد.

http://redirect.vebeet.com/index.php?url=http://google.com

خوب حالا به جاي آدرس گوگل آدرس سايت مربوطه را بگذاريد و لذت ببريد.

موفق باشيد.

ادامه مطلب

فريم ورك طراحي سايت چيست؟

فريم ورك ها  كتابخانه هاي آماده اي مي باشند كه داراي يك چارچوب كاري منظم در زبان هاي برنامه نويسي مي باشند. و برنامه نويسان و طراحان مي توانند با فريم ورك هاي طراحي سايت در مدت زمان كمتر و با سهولت كار طراحي خود را انجام دهند. براي مثال ديگر لازم نيست براي طراحي يك سايت ريسپانسيو از مرحله اول شروع به نوشتن كد هاي سنگين و مشكل براي واكنشگرا كردن آن وب سايت نمايند كه نياز به آموزش Css زيادي دارد. در واقع فريم ورك ها اين كار را از پيش براي طراحان انجام داده اند و آن ها مي توانند به راحتي از آن استفاده نمايند. در فريم ورك هاي مختلف متد ها و كلاس هايي از قبل كد نويسي شده اند و برنامه نويسان مي تواند با استفاده از آنها خود كد هاي كمتري را نوشته و بهره وري بهتري داشته باشند.

مزاياي كار كردن با فريم ورك ها:

• سادگي بيشتر
• امنيت بالاتر
• زمان كمتر
• بهره وري بالاتر با نتيجه بهتر
• داراي اصول مهندسي خاص
• رفع نواقص
• نمونه هاي بيشتر
• پياده سازي حرفه ايي

و موارد بسيار ديگر دارد.

در ادامه براي شما چند مورد از پر كاربرد ترين فريم ورك ها را معرفي مي كنيم. با ما همراه باشيد.

 Bootstrap

Bootstrap امروزه يكي از معروف ترين و پر كاربرد ترين فريم ورك ها مي باشد. اين فريم ورك از مجموعه اي از ابزارهاي رايگان براي طراحي آسان صفحات وب و همچنين نرم افزار هاي تحت وب مي باشد. Bootstrap شامل كدهاي    زبان برنامه نويسي Css و HTML و توابع JavaScript  مي باشد كه به راحتي امكان ايجاد فرم ها، دكمه ها، ستون ها و المان هاي ديگر يك سايت را به صورت استاندارد فراهم مي سازد. امكان طراحي واكنشگرا به طوري كه صفحات وب به صورت هماهنگ و استاندارد در تمامي دستگاه ها نمايش داده شود، از نسخه دوم آن به بعد لحاظ شد.

Pure

Pure Framework  از جديد ترين فريم ورك ها مي باشد كه در سبك مدولار  توسط ياهو ارائه شده است.اين فريم ورك بسيار كم حجم و سريع مي باشد و تنها از زبان هاي برنامه نويسي HTML و CSS ساخته شده و در واقع در ن هيچ گونه كد JavaScrip  مشاهده نمي شود.

از ويژگي هاي اين فريم ورك مي توان به موارد زير اشاره نمود:

• ريسپانسيو بودن
• طراحي ساده فرم ها و جدول ها
• طراحي ساده
• فشرده بودن و حجم پايين 5.7 KB
• جزء به جزء بودن كدها (هر قسمت از فريم ورك كه نياز باشد از Css ججداگانه آن استفاده مي شود.)

ادامه مطلب

سازگاري قالب سايت با مرورگرهاي مختلف موضوع بسيار مهمي مي باشد. امروزه يكي از چالش ها و مشكلات پيش رو براي طراحان وب سازگاري و نمايش صحيح وب سايت طراحي شده بر روي مرورگرهاي مختلف (كروم، فايرفاكس و سافاري و … ) مي باشد. و طراحي وب سايت به طوري در تمام مرورگر ها به يك شيوه نمايش داده شود (Cross Browser) يك امتياز ويژه براي طراحان وب است. برخي از طراحان اين مشكل را با افزودن  سنگين و پيچيده در لابه لاي فايل هاي استايل خود (Css) برطرف مي سازند كه بسيار پيچيده و همچنين زمان بر مي باشد. براي برطرف سازي اين مشكل تكنيكي به عنوان استفاده از   CSS Reset وجود دارد كه از محبوبيت بالايي بين طراحان سايت برخوردار است. با آموزش Css با ما همراه باشيد.

Css Reset نمايش صحيح سايت در مرورگر هاي مختلف

همان طور كه مي دانيم كد هاي HTML  بدون شيوه نامه Css  كاملا به هم ريخته و در واقع بدون هيچ گونه استايلي مي باشد. اما پس از نوشتن كد هاي استايل Css  يك قالب با چينش منظم و استايل مورد نظر را خواهيم داشت. اما بدون استفاده از فايل css reset قالب مورد نظر در مرورگرهاي مختلف داراي نمايش و چينش متفاوت در قسمت هاي مختلف پوسته خود مي باشد. در مرور گر ie گاهي اين تفاوت ها به قدري زياد است كه به هم ريختگي در چينش سايت مشاهده مي شود. گهي طراحان سايت از هماهنگ كردن قالب خود در اين مرورگر صرفه نظر مي كنند! اما مي توان به منظور يكسان نمودن حالت پيش فرض نمايش سايت در تمامي مرورگرها از كد هاي css reset استفاده نمود.

كد CSS Reset چگونه كار مي كند؟

css reset مجموعه اي از كد هاي استايل به زبان برنامه نويسي Css  مي باشد كه در آن تمام استايل هاي پيش فرض و يكسان عناصر و تگ هاي HTML  كه در مرورگر هاي مختلف به شكل متفاوت ديده مي شود قرار گرفته است. پس از استفاده از كد هاي Css reset استايل قالب به صورت پيش فرض در تمامي مرورگر ها چينش و نمايش يكساني پيدا مي كند و طراح پس از آن كد هاي استايل Css  مد نظر خود را نوشته و قالب خود را شكل مي دهد. تنها نكته اي كه بايد به آن توجه نمود اين است كه قسمت دستور line-heightرا از كدهاي css reset حذف و مقدار فاصله خطوط مد نظر خود را در كد هاي Css  خود قرار دهيد. ما براي شما اين كد ها را قرار داده ايم كه مي توانيد آن را به راحتي در كپي نموده و در ابتداي فايل Css  خود قرار دهيد.

همچنين مي توانيد فايل reset.css  را دانلود كرده و آن دا در پروژه خود در فولدر css خود قرار دهيد و سپس آن ا با نوشتن كد زير در ابتداي فايل Css خود فراخواني نماييد.

@import url(reset.css);

ادامه مطلب