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

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

در این مطلب آموزشی از بخش آموزش های وردپرس روکش می خواهیم نحوه ساخت منو کشویی (آبشاری) برای وردپرس را به صورت گام به گام برای شما بیان کنیم. این مطلب آموزشی را بگونه ای پیش خواهیم برد که شما با اصول اولیه ساخت یک منو توسط css و html آشنا شوید و علوه بر تسلط کامل بر ساخت منو کشویی برای وردپرس بتوانید برای سیستم های محتوای دیگر یا حتی قالب های html نیز به راحتی یک منو زیبای کشویی یا همان منو آبشاری ایجاد کنید.

گام اول : نوشتن markup HTML منو کشویی

برای ساخت یک منو کشویی ما باید در ابتدا markup HTML آن را بنویسیم. بهترین تگ html برای ساخت یک منو کشویی تگ ul می باشد. در اصل این تگ برای فهرست کردن موضوعات در یک سند html می باشد اما ما می توانیم از آن جهت ساخت یک منو آبشاری نیز استفاده کنیم. یک نمونه ساده از markup HTML یک منو کشویی با استفاده از تگ ul مانند زیر می باشد.

<ul>
  <li></li>
  <li>
     <ul>
         <li></li>
         <li></li>
     </ul>
  </li>
  <li></li>
  <li></li>
</ul>

همانطور که در خط چهارم می بینید ما بین تگ باز و بسته li یک تگ باز و بسته ul دیگر قرار دادیم به همین ترتیب می توان به صورت پله ای بی نهایت تگ ul و li را درون هم قرار داد. تنها باید به این نگته توجه کرد که ما فقط مجاز به استفاده از تگ li در تگ ul می باشیم. در تگ li هم می توانیم از اکثر تگ های html استفاده کنیم.

حال که با markup HTML کلی یک منو آبشاری آشنا شدید نگاهی به کد های html زیر بیندازید.

<nav>
<ul>
	<li><a>خانه</a></li>
	<li><a>دسته بندی ها</a>
		<ul>
			<li><a>قالب وردپرس</a>
				<ul>
					<li><a>قالب شخصی</a></li>
					<li><a>قالب شرکتی</a></li>
				</ul>
			</li>
			<li><a>آموزش وردپرس</a></li>
		</ul>
	</li>
	<li><a>درباره ما</a></li>
	<li><a>تماس با ما</a></li>
</ul>
</nav>

در کد بالا ما ۴ عنوان اصلی داریم که یکی از آنها شامل دو زیر مجموعه می باشد به همین ترتیب یک از زیر مجموعه ها نیز دارای ۲ زیر مجموعه دیگر می باشد. بعد از اینکه این کد را در یک صفحه با فرمت html ذخیره کردید نتیجه کار مانند زیر می شود.

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

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

  • سرعت بالا در ساخت منو ها
  • فراهم آوردن امکانات مدیریتی آسان برای منو ها
  • افزودن کلاس های html خاص به منو ها
  • قابلیت مدیریت چندین منو در یک بخش

چگونه از فهرست های وردپرس استفاده کنیم؟

برای استفاده از فهرست ها ابتدا باید کد زیر را به فایل فانکسن قالب سایت خود اضافه کنید.

function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' )
)
);
}

add_action( 'init', 'register_my_menus' );

در کد بالا top-menu شناسه منو و “منو بالا” نام منو می باشد. برای داشتن منو های بیشتر می توانید مانند زیر اقدام کنید.

function register_my_menus() {
register_nav_menus(
array(
'top-menu' => __( 'منو بالا' ),
'main-menu' => __( 'منو میانی' ),
'footer-menu' => __( 'منو پایین' )
)
);
}

add_action( 'init', 'register_my_menus' );

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

<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>

در این کد ما منو با شناسه top-menu را فراخوانی کرده ایم. ما این کد را در فایل header.php قرار می دهیم تا در بالای تمامی صفحات دیده شود.

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

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

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

گام دوم: تغییر ظاهر منو کشویی با استفاده از css

حال نوبت به تغییر ظاهر منو می رسد. در این مرحله ما به شما می گوییم که چگونه می توانید برای یک منو آبشاری کد های CSS را بنویسد. تمام کد هایی که در اینجا معرفی می کنیم را باید در فایل style.css قالب فعلی سایت خود قرار دهید.

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

nav {
    background: none repeat scroll 0 0 #708090;
    height: 40px;
    margin: 0 auto;
    width: 1000px;
}

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

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

nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

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

حال نوبت به تگ li می رسد. کد های زیر برای این تگ نوشته شده اند که باید به همین ترتیب نیز در فایل style.css قالب قرار گیرند.

nav > ul > li {
    background: none repeat scroll 0 0 #87CEEB;
    border-left: 1px solid #73BAD7;
    display: block;
    float: right;
}
nav ul li {
    margin: 0;
    position: relative;
}

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

حال نوبت به لینک ها می رسد. کد های css زیر برای لینک های منو نوشته شده اند که باعث می شوند تا این منو شکل یک منو واقعی را به خود بگیرد.

nav > ul > li > a {
    padding: 10px 20px;
}
nav ul li a {
    color: #0000FF;
    display: block;
    float: right;
    font-family: tahoma;
    font-size: 15px;
    padding: 10px 15%;
    text-decoration: none;
}

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

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

nav ul li ul {
    background: none repeat scroll 0 0 #708090;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 170px;
}
nav ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
nav ul li ul li ul {
    border-right: 1px solid #5D6D7D;
    right: 100%;
    top: 0;
}
nav ul li ul li a {
    border-bottom: 1px solid #637383;
    color: #FFFFFF;
    text-align: right;
    width: 70%;
}

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

خوب کار تغییر ظاهر منو هم در اینجا تمام شد. امیدواریم تا این آموزش توانسته باشد به شما کمک کند. در صورت داشتن هرگونه پرسشی در باره منوهای کشویی وردپرس آن را با ما در میان بگذارید.

کد کامل css جهت تغییر ظاهر منو آبشاری (کشویی):

nav {
    background: none repeat scroll 0 0 #708090;
    height: 40px;
    margin: 30px auto 0;
    width: 1000px;
}
nav ul li a {
    color: #485868;
    display: block;
    float: right;
    font-family: tahoma;
    font-size: 15px;
    padding: 10px 15%;
    text-decoration: none;
}
nav > ul > li > a {
    padding: 10px 20px;
}
nav ul li {
    margin: 0;
    position: relative;
}
nav ul li ul {
    background: none repeat scroll 0 0 #708090;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 170px;
}
nav ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
nav ul li ul li ul {
    border-right: 1px solid #5D6D7D;
    right: 100%;
    top: 0;
    z-index: 2;
}
nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
nav > ul > li {
    background: none repeat scroll 0 0 #87CEEB;
    border-left: 1px solid #73BAD7;
    display: block;
    float: right;
}
nav ul li ul li a {
    border-bottom: 1px solid #637383;
    color: #333333;
    float: none;
    text-align: right;
    width: 70%;
    z-index: 2;
}
nav ul li ul li {
    clear: both;
    display: block;
    float: none;
    position: relative;
    width: 100%;
    z-index: 2;
}

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

دیدگاه کاربران

  1. میلاد

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

    • سعید شعبانی

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

      nav ul li ul li:hover > a {
          background-color: #DDDDDD;
          color: #000000;
      }
      

      منظورتون از فهرست دلخواه ابزارک چیه؟ میشه لینک بدید ببینم؟

      • میلاد

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

        • سعید شعبانی

          ۱- اهان اصلا یادم به اون نبود. خوب فکر کنم با تغییر تگ nav به widget_nav_menu در فایل استایل قالب تمام استایلی که برای منو نوشته شده به این منو اضافه بشه.

          مثلا:

          تغییر

          nav {
              background: none repeat scroll 0 0 #708090;
              height: 40px;
              margin: 30px auto 0;
              width: 1000px;
          }
          

          به

          .widget_nav_menu {
              background: none repeat scroll 0 0 #708090;
              height: 40px;
              margin: 30px auto 0;
              width: 1000px;
          }
          

          ۲- منظورتون کدوم کدها هست؟

          • میلاد

            بازم ممنونم تست میکنم بهتون جواب میدم.
            درباره سوال دوم:
            مثلا همین که میگید برای استایل دادن به منو باید از nav استفاده بشه و برای استایل دادن به ابزارک منو باید از .widget_nav_menu استفاده بشه.

            • سعید شعبانی

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

              • صدا زدن تگ المان
                 <nav>
                
              • صدا زدن کلاس المان
                .nav
                
              • صدا زدن id المان
                 #nav
                
              • یا ترکیبی از این موارد

              برای اینکه بهتر متوجه بشید لازم هست تا با مقدمات css , html آشنا باشید.

              • میلاد

                خب به قول شما توی همین آموزش به منو تگ nav رو نسبت دادیم اما به فهرست دلخواه ابزارک که ما چیزی نسبت ندادیم(.widget_nav_menu)؟

                • سعید شعبانی

                  درسته که ما به فهرست دلخواه ابزارک به طور مستقیم چیزی را نسبت نمی دهیم ولی خود وردپرس وقتی که یک ابزارک را می خواهد به صفحه اضافه کنه بهش یک div با کلاس های متفاوت می دهد. کلاسی که وردپرس برای ابزارک فهرست دلخواه انتخاب می کنه widget_nav_menu می باشد.

                  • میلاد

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

                    ul id="menu-%da%af%d9%88%d8%b4%d9%87" class="menu"
                    

                    اما شما به من گفتی از کلاس زیر استفاده میکنه!!!
                    .widget_nav_menu

                    • سعید شعبانی

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

                    • میلاد

                      بابت سایتی که معرفی کردی ممنون عالی بود

  2. میلاد

    سلام آقا سعید من hami73 هستم و از انجمن وردپرس فارسی اومدم یه سوال داشتم برای خبرنامه از چه کدی استفاده کردید؟

  3. میلاد

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

    • سعید شعبانی

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

  4. میلاد

    این کلاس ها رو چطوری میشه به دست آورد؟

  5. سام

    سلام دوست عزیز من ۲ تا مشکل دارم با این منو
    اولین اینکه زیر منوی من میره زیر اسلایدر چیکار کنم که بره روی اسلایدر
    دومیش هم اینکه من مخوام زیر منوم list-style داشته باشه وقتی این خاصیت رو قرار میدم list-style من به جایی که بره سمت چپ می ره سمت راست و جاش هم وسط نیست
    ممنون میشم راهنمایی کنید
    با تشکر
    موفق باشید

    • سعید شعبانی

      برای اینکه منو بالاتر از هر المان دیگری در صفحه قرار بگیره باید z-index منو را مانند زیر افزایش بدید.

      nav {
      z-index: 99;
      }
      

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

      nav ul li ul {
          list-style: disc outside none;
      }
      nav ul li ul li{
         margin-right: 22px;
      }
      

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

  6. میلاد

    سعید جان شرمنده من دوباره به مشکل بر خوردم عکس زیر رو ببینید:
    مشاهده عکس
    جاوا اسکریپت تو دسته نرم افزار هستش اما جلوی خودش نشون نمیده!!

  7. سلام سعید جان
    خیلی خوب و کامل توضیح دادی؛ دستت درد نکنه، واقعا مفید بود

  8. ممنون سعیدجان
    فقط یه اشتباه تایپی شده
    کد باز نشده توی فراخانی

    <!--?php wp_nav_menu( array( 'theme_location' =--> 'top-menu', 'container' =&gt;'nav', 'menu_class' =&gt;'topnav' ) ); ?&gt;
    

    باید به صورت زیر باشد

     'top-menu', 'container' =&gt;'nav', 'menu_class' =&gt;'topnav' ) ); ?&gt;
    
  9. سمیه

    سلام آقا سعبد
    من میخوام منوی آبشاری در قسمت سمت راست ایجاد کنم نه در قسمت هدر سایت
    میشه منو راهنمایی کنید
    اصلا راهی هست ….؟

    • سعید شعبانی

      سلام دوست عزیز
      برای اینکه منو را داخل نوار کناری سایت قرار بدید فقط باید در بخش کدهای css منو تغییراتی را ایجاد کنید. یعنی کد های html همگی مانند قبل هستند و فقط باید تغییراتی جزئی در کدهای css ایجاد کنید. من این کارو انجام دادم که شما می توانید با جایگزین کردن کدهای css زیر به جای کدهایی css قبلی منو آبشاری را داخل نوار کناری داشته باشید. (اینجا می توانید نمونه این منو را ببینید)

      nav {
          background: none repeat scroll 0 0 #708090;
          margin: 0 auto;
          width: 150px;
      }
      nav ul li a {
          border-bottom: 1px solid #75BCD9;
          color: #485868;
          display: block;
          font-family: tahoma;
          font-size: 15px;
          padding: 10px 15%;
          text-align: right;
          text-decoration: none;
      }
      nav > ul > li > a {
          padding: 10px 20px;
      }
      nav ul li {
          margin: 0;
          position: relative;
      }
      nav ul li ul {
          background: none repeat scroll 0 0 #708090;
          opacity: 0;
          padding: 0;
          position: absolute;
          right: 100%;
          top: 0;
          transition: all 0.5s ease 0s;
          visibility: hidden;
          width: 170px;
      }
      nav ul li:hover > ul {
          display: block;
          opacity: 1;
          visibility: visible;
      }
      nav ul li ul li ul {
          border-right: 1px solid #5D6D7D;
          right: 100%;
          top: 0;
          z-index: 2;
      }
      nav ul {
          list-style: none outside none;
          margin: 0;
          padding: 0;
      }
      nav > ul > li {
          background: none repeat scroll 0 0 #87CEEB;
          border-left: 1px solid #73BAD7;
          display: block;
      }
      nav ul li ul li a {
          border-bottom: 1px solid #637383;
          color: #333333;
          float: none;
          text-align: right;
          width: 70%;
          z-index: 2;
      }
      nav ul li ul li {
          clear: both;
          display: block;
          float: none;
          position: relative;
          width: 100%;
          z-index: 2;
      }
      
  10. danesh

    با سلام
    من از انجمن وردپرس اینجا آمدم اولا تشکر بابت جواب
    من منوها را ساختم ولی طبق شکل روی همین منوی که آموزش دادید برفرض من میخواهم بروم “دسته بندی/آموزش وردپرس” در طراحی استاتیک وقتی می خواهیم لینک بدهیم می نویسم

    www.domain-name.com/دسته بندی/آموزش وردپرس .html 
    

    که خودمان یک صفحه

    "آموزش وردپرس.html"
    

    می ساختیم و لینک می دادیم حالا سوالم اینه توی وردپرس ما منوی “آموزش وردپرس ” را ساختیم اما صفحه مربوط به آن را از کجا میسازیم و چطوری به این صفحه لینک می دهیم همین ساختار حالت استاتیک چه جوری در وردپرس پیاده میشه؟
    امیدوارم منظورم را رسانده باشم

    لینک آپلود عکس
    http://oi42.tinypic.com/2dwg8b9.jpg
    تشکر

    • سعید شعبانی

      امیدوارم که منظورتون را درست فهمیده باشم.

      در قالب های استاتیک ابتدا یک فایل با فرمت html می ساختیم که با یک آدرس مشخصی مثل آدرس زیر باز می شد

      name.come/page.html
      

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

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

  11. با سلام خدمت شما

    منظورتون کد نویسی سایت میباشد ؟؟؟ از کدام قسمت وارد کد نویسی قالب میشین؟

  12. میلاد

    سلام سعید جان دوباره مزاحم همیشگی اومد،
    من دوباره با این منو به مشکل خوردم،وقتی تعداد گزینه های منو زیاد میشه میره خط بعدی و قالب سایت رو به هم میریزه،
    حالا من اومدم به این منو خاصیت height و overflow=hidden دادم مشکلش حل شد اما یه مشکل جدید پیدا کرد،حالا زیر منو ها رو به خاطر overflow نشون نمیده اگه میشه راهنماییم کن.
    ممنون.

    • سعید شعبانی

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

  13. سلام.
    من می خوام منو مثل سایت http://www.aviny.com/ داشته باشم باید چیکار کنم؟
    لطفاً سریعتر جواب بدید خیلی بهش نیاز دارم.

    • سعید شعبانی

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

  14. خیلی ممنون که پاسخ دادید.
    حالا برای این منوها که دوتا زیر منو داره چه تابعی هست؟

  15. سلام.
    دستتون درد نکنه. خسته نباشید و ایشالا همیشه موفق باشید. یا حق

  16. با سلام من می خوام مطلبی را در داخل منوهای کشویی قراردهم به صورتی که آن مطلب در قسمت اصلی سایت یعنی همان صفحه اصلی که در مقابل ما است نمایش داده نشود و فقط از داخل منو کشویی نمایش داده شود اگه جواب را ایمیل نمایید ممنون میشم-در ضمن مطلب را داخل کشو منویی میگذارم ولی در صفحه اصلی هم نمایش داده می شود که میخوام در صفحه اصلی نمایش داده نشود

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

    • سعید شعبانی

      شما می تونید یک برگه با محتوای دلخواهی که می خواهید درست کنید بعد وارد مسیر نمایش >> شخصی سازی بشید و از بخش در برگه‌ی نخست نمایش داده شود گزینه برگه ایستا را انتخاب نمایید و برگه نخست را روی اون برگه ای که ساختید تنظیم کنید.

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

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

  20. هزینه آن چقدر میشه تا ارسال کنم براتون

  21. ممنون آقا سعید ، استفاده کردم ،
    من یه منو آزماشی وای بصورت عمودی با زیر منو ساختم جهت تمرین برای یادگیری
    کار با ul , li ها ، از دستور visibility برای مخفی و نمیش زیر منوها استفاده کردم،ولی هنگام نمایش زیر منو باید دقیقا زمانی که شکا موس به حالت دست در میآد زیر منوها باز بشن ، ولی منوی آزمایشی من موس دقیقا زمانی که شکلش تغییر میکنه این اتفاق نمیافته و یکمی که از ul فاصله میگیره و دوباره حالت فلش پیدا میکنه زیرمنوها باز میشن ،سر شما رو درد آوردم ، منتظرم برای راهنمایی ، ممنون میشم اگر در ایمیلم پیغام شما رو دریافت کنم ،

    • سعید شعبانی

      مصطفی عزیز خیلی خوشحالم که این آموزش تونسته به شما کمک کنه. در مورد ساخت منو های آبشاری بهتر هست تا زیر منو ها را با display مخفی کنید تا چنین مشکلاتی پیش نیاد و اینکه شما محدوده هر المان li را باید محدود کنید تا تغییر وضعیت فقط دقیقا روی همان li اتفاق بیفتد. برای اینکه بهتر بتونم به شما کمک کنم بهتر هست طرحی که زدید را داخل سایت http://codepen.io ذخیره کنید و لینک اون را اینجا قرار بدید تا ببینم چجوری هست.

  22. مجتبی

    واقعا عالی بود حرف نداشت بی نظیر بود دمت گرم و سپاس فراوان

  23. سلام
    آقا من منو کشویی رو درست کردم و کدهای css جدید همون طور که گفتید جایگزین کدهای قبلی کردمش برای اینکه منو بیاد توی سایدبار.

    ولی وقتی موس رو میبرم روی منو ها، منوها نوسان دارن و تکون میخورن! میشه درستش کرد؟؟؟

    از اون مهم تر شکل و ظاهر منو هست که شکلش اصلا به قالب من نمیاد نمیشه تغییر داد ظاهر و رنگش رو؟؟؟

  24. من میخوام رنگ منوها عین رنگ سایدبارم باشه یا اصلا بهتر بگم منوهای اصلی(مادر) هیچ رنگی نداشته باشن ولی زیر مجموعه هاشون رنگی باشن. نمیشه کاریش کرد؟

    منوها چرا می لرزن؟ http://publicdl.com

    • سعید شعبانی

      ببخشید یکم دیر جواب می دهم. الان که کلا منوها داخل سایت شما هیچ استایلی نداردند. شما کدهای css را آخر فایل style.css قالب خودتون قرار بدید بعد هم از طریق فهرست ها منو را ایجاد کنید تا بتونم کمکتون کنم.

      • سلام خسته نباشید آقا سعید
        خب من فهرست ها رو گذاشتم توی سایدبارم.
        فقط دو مشکل دارم: یکی اینه که منوها وقتی میرم روشون میلرزن
        دوم رنگشه که بهتون گفتم.
        لطفا راهنمایی کنید چطور کد رنگ ها رو تغییر بدم. من از css و html هیچ سر در نمیارم پس لطفا یه جور بگید که من بفهمم.

        • سعید شعبانی

          دوست عزیز سایتتون برای من به این شکل بالا میاد به خاطر همین هم نمی تونم مشکل لرزش منو ها را ببینم. در مورد رنگ هم شما باید داخل کد های css منو کدهای رنگ هر بخش را که مثل

          #۷۰۸۰۹۰
          

          هستند, را تغییر بدید. کد رنگ ها را هم می تونید با استفاده از فتوشاپ بدست بیارید.

          • نه سایتم کاملا درست بالا میاد ببینید:
            http://publicdl.com/wp-content/uploads/3-7-2014-8-52-48-PM.png

            میشه بگید برای تغییر رنگ دسته های مادر باید کجا ویرایش بشه و برای زیرشاخه ها کجا؟
            کار با فتوشاپ بلد نیستم میشه یه چیز ساده تر بگید؟
            ممنون

            • سعید شعبانی

              شاید مشکل از نت من باشه ولی برای من سایتتون درست نشون داده نمی شه. پیشنهاد می کنم کش مرورگرتون را پاک کنید یا از دستگاهی دیگه تست بگیرید ببنید درست هست یا نه. برای تغییر رنگ دسته های مادر عدد کد رنگ زیر را تغییر بدید

              #۸۷CEEB
              

              برای زیر شاخه ها هم این را تغییر بدید.

              #۶۳۷۳۸۳
              

              برای پیدا کردن کد رنگ ها هم همونطور که گفتم از فتوشاپ می تونید استفاده کنید. ولی اگر کار با فتوشاپ را بلد نیستد می تویند از ابزار آنلاین colorpicker کمک بگیرد.

  25. با سلام من وقتی میخام وارد سایتم بشم به صفحه لاگین وردپرس هدایت میشم یعنی وقتی وارد این سایت که مال خودم است میشمwww.fdalvand.ir
    این آدرس باز میشه:http://fdalvand.ir/wp-login.php?redirect_to=http://fdalvand.ir/wp-admin/&reauth=1
    لطفا مشکل از کجاست.اگه زحمتی نیست تا اطلاعات هاست را ارسال نمایم تا وردپرس فارسی را مجددا نصب نمایید با تشکر

  26. سلام
    آموزش خوبی بود ممنون.
    فقط یه مشکلی که من دارم اینه که رنگ این منوها اصلا به رنگ قالب من نمیخوره.
    من میخوام منوهای اصلی(مادر) بی رنگ باشن و زیرشاخه ها رنگ داشته باشن. امکانش هست؟
    میخوام مثل این باشه http://www.downloadha.com

  27. چرا جواب دیدگاهمو نمیدید؟ آخه خیلی ظروریه!!!!!!

  28. با سلام و خسته نباشید
    می خواستم بدونم برای کسی که از کد نویسی چیزی نمی دونه و می خواد برای سایت وردپرسش منو آبشاری بذاره افزونه ای وجود نداره؟

    ممنون از راهنماییتون

  29. مهرزاد

    سلام طبق آموزش شما ساختم و به خوبی اجرا شده
    فقط یه مشکل نمیدونم چیکار کردم که لیست برگه ها زیر منو آبشری نشون میده
    http://shora-mahmoodabad.ir/
    میتونید ببینید

    • سعید شعبانی

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

  30. مهرزاد

    شما بی زحمت یه سر به سایت shora-mahmoodabad.ir برید
    حد فاصل بین منوی کشویی و مطالب / لیست برگه ها نوشته شده
    من رنگشو سفید کردم ولی هایلایت کنید مشخص میشه
    میخام اسم برگه ها تو صفحه اصلی نشون نده

  31. مهرزاد

    میشه بگید چجوری‌؟

  32. مثل همیشه بهترینید

    ممنون خیلی دنبالش بودم

  33. رضا

    سلام
    من تو قسمت html همه چی رو ساختم درس کار می کرد ولی تو وردپرس قسمت از قسمت هایی که از < استفاده کردم (در css) درس کار نمی کنن لطفا راهنمایی کنید

    • سعید شعبانی

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

       [code]
      
      [/code]
      
      • رضا

        سلام دوباره
        به عکس زیر نگاه کنید:
        http://uplod.ir/neum0e3n9ovd/ed.jpg.htm

        کد هام هم اینه :
        css:

        .head .tmenu ul{list-style:none;font-family: 'BYekan';}
        .head .tmenu > ul > li{border-left: 1px solid #ECF0F1; display: block; float: right;}
        .head .tmenu > ul > li:last-child{border-left: 0px ;}
        .head .tmenu ul li{float:right; margin: 0; position: relative; }
        .head .tmenu > ul > li > a{padding: 10px 20px;}
        .head .tmenu > ul > li > ul:before {border-bottom: 7px solid #FFF; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; position: absolute; right: 12px; top: -7px;}
        .head .tmenu ul li a{color:#ecf0f1; display: block; text-align:center; font-family: BYekan; font-size: 18px; padding: 10px 15%; text-decoration: none;
        transition: 0.3s all ease;-webkit-transition: 0.3s all ease;}
        .head .tmenu ul li:hover ul {margin:0;transition: all 0.3s ease;}
        .head .tmenu ul li ul {margin:10px 0 0 0; opacity: 0; padding: 0px; position: absolute; right:-1px; top: 100%; transition: all 0.3s ease; visibility: hidden; width: 170px; }
        .head .tmenu	ul li:hover > ul {display: block; opacity: 1; visibility: visible;}
        .head .tmenu ul li a:hover{color:#f1c40f; }
        .head .tmenu ul li ul li ul {  border-right: 1px solid #ECF0F1; right: 108%; top:-1px;}
        .head .tmenu ul li ul li:hover ul{right: 100%;}
        .head .tmenu ul li ul li a { color: #ecf0f1; float: none; width: 70%; z-index: 2; text-align: center;
        background: rgba(42, 42, 40, 0.9);}
        .head .tmenu ul li ul li {border-bottom: 1px solid #637383;
        clear: both; display: block; float: none; position: relative; width: 100%; z-index: 2;	}
        .head .tmenu ul li ul li:first-child{border-top:1px solid #fff;}
        

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

        • سعید شعبانی

          امیدوارم که منظورتون را خوب فهمیده باشم. برای اینکه یک خط در سمت چپ هر کدام از عناوین منو اصلی ظاهر بشه می تویند از کد css زیر استفاده کنید.

          .head .tmenu > ul > li > a{border-left: 1px solid #fff}
          

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

          .head .tmenu > ul > li > ul{border-left: 1px solid #fff}
          
  34. اقا سعید شما ویرایش قالب هم انجام میدید . اگه میدید تعرفه هاشو به ایمیلم بفرستید قالبمو میخوام یه سری تغیرات توش انجام بدم ممنون میشم کمکم کنید.

  35. چرا تو قالب خودم کار نمیکنه . تو بقیه قالب ها کار میکنه . تو اونی که خودم نوشتم کار نمیکنه

    http://imeneghlimkavir.com/

  36. محمود

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

    • سعید شعبانی

      اگر آدرس پستی که از طریق منو باز می کنید درست باشه و همچنین قالیتون دارای یک فایل سالم single,php یا content.php باشد, باید به درستی محتوای اون پست را ببنید. اگر مشکلتون حل نشد لطفا آدرس سایت خودتون را بدید تا چکش کنم.

  37. david

    عالی یود سعید جان.. سعید تو اینقد خوب میدونی ما تازه کار ها چی لازم داریم چی لازم نداریم و اینقد قشنگ و ساده و کامل توضیح میدی چرا یه فیلم اموزشی نمیزاری ؟؟؟ اخه مطمعنن شما هم که مثل ما در اول راه بودید خیلی چیزا ها واستون سوال بوده مثلا واسه ورد پرس چرا فایل ها تیکه تیکه میشن (هدر فانکشن استایل و …) و اینکه هرکدوم از این فایل ها به چه دردی میخوره و چه کد های باید توشون نوشته بشه ؟؟ و یا واسه اینکه تسلط نسبی نسبت به فایل های پی اچ پی که در وردپرس به کار میره چکار کنیم ؟ اینکه برگه تو خوده وردپرس چه فرقی با فهرست داره یا برگه چه فرقی با دسته ها چی و توضیح هر کدوم از اینا که واسه کاربرای تازهکاری مثل ما گیچ کنندست 🙁 .. یا اینکه دیتا بیسی که واسه ورد پرس میسازیم چقد ظرفیت داره چطوری باید دیتا بیس رو مدیریت کنیم و چیزهای که در اینرابطه به یادگیریمون کمک میکنه ! حالا نمیدونم خودتون اول راه بودید این چیزا واستون سوال بوده یا نه چون اگه بوده باشه خیلی راحت میتونید بهمون کمک کنید و بهتر میفهمید ما رو … همه اینا رو گفتم چون از خیلی از سایت های که دیدم فقط سعید بود میدونست چی باید گفته بشه و مهمتر چطوری باید بگه .. مرسی سعید

    • سعید شعبانی

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

  38. hasan

    سلام
    ببخشید من میخواستم این منو را درستش کنم ولی هر کاری میکنم نمیتونم.
    میشه راهنمایی کنید؟
    این لینک هست:
    http://shahnam.wpro.ir
    توی قسمت Html برای قسمت های مختلف ul li و زیر منو ها کلاس Css جداگونه تعریف شده. ولی خوب وقتی من کد را برای قسمت منو قرار میدم همه چیز به هم میریزه.
    در واقع میخواستم ببینم چه تغییراتی باید بدم توی cssها ؟
    ممنون میشم راهنمایی کنید.
    به صورت html اش را هم توی این لینک قرار دادم که ببینید.
    http://shahnam.wpro.ir/wp-content/themes/sh/html/
    ممنون از لطفتون

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

  40. hosein

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

  41. علیرضا

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

  42. سلام اساتید من الان کد شما رو گرفتم کا میکنه ولی یه مشکل چطور منوی هایی که در فهرست هستنو با این منوی html ارتباط بدم کمک کنید دمتان گرم .

    • سعید شعبانی

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

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

  44. خیلی عالی بود دستتون درد نکنه

  45. امیر

    ممنون
    فقط تو این مثال نگفتین کد فهرست و کجا بزاریم که زیر منو ها بهم نخوره ؟ چون تو وردپرس خودش ul li و کلاس .sub-menu و میده کد html و میگید و همنطور کجاش کد فرست و بزاریم ؟

    • سعید شعبانی

      در این مورد در بخش چگونه از فهرست های وردپرس استفاده کنیم؟ همین مطلب توضیح داده شده است. ما در اینجا کل منو را داخل تگ nav قرار دادیم و با توجه به این تگ به منو و زیر منو هاش استایل دادیم. درسته خود وردپرس یک سری کلاس پیشفرض به زیر منو ها و حتی خود منو اضافه می کنه ولی ما با استفاده از تگ های تو در تو Html برای منو و زیر منو هاش استایل نوشتیم.

  46. dana

    سلام
    دوست گرامی یه سوال داشتم خدمتتون

    در سورس استایل از علامت ” < " برای زیر منو ها استفاده کردید، این به چه معناست؟ میشه یه توضیحی بدید
    ممنونم از لطفتون

    شاد باشید

    • سعید شعبانی

      وقتی علامت فلاش > بین دو کلاس, آیدی یا تگ در css قرار می گیره به این معنا هست که المانی که دقیقا زیر مجموعه المان قبل از فلش هست را انتخااب کند. در اینجا هم ما برای انکه فقط روی li های زیر منو اثر بگذاریم از این فلش ها استفاده کردیم.

  47. arvin

    سلام
    من یه مشکل دارم یه قالب برای سایتم نصب کردم که وقتی وارد صفحه های دیگه سایت میشم منوی کشویی بغل بهم می ریزه چکار باید انجام بدم؟ لطفا کمکم کنید

    • سعید شعبانی

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

  48. sajjad

    سلام خسته نباشید ! من منوی (صفحه اصلی) گذاشتم بعد وقتی روش کلیک میکردم صفحه اصلی تو یک Tab دیگه باز میشد که میخوام این طوری نباشه ! چیکار کنم ؟

    • سعید شعبانی

      زمانی که شما در بخش فهرست های وردپرس منو را ایجاد می کنید برای هر آیتم یک گزینه به عنوان “نمایش پیوند در پنجره/زبانه تازه ” قرار داده شده با برداشتن تیک این گزینه دیگه لینک مورد نظر در صفحه جدید باز نخواهد شد.

  49. ali

    سلام تشکر باور کنید کل اینترنت را شخم زدم مطلبی بهتر از این پیدا نکردم فقط دو تا مشکل دارم
    یکی اینکه زیز منو ها بد باز میشه با موس پایین میای میپره؟
    دوم اینکه اگه بخواهیم هم منو کنار با css که کذاشتید و هم منوی بالا باید چیکار کنیم css ها که هم نامن میشه …؟

  50. کوروش

    ممنون متن خوبی بود. سادگی بیش از حد وردپرس گیج کننده است!

  51. افشین

    سلام
    من این کارو با یک قالب اضافه کردم اما در اینترنت اکسپلور درست کار نمیکنه و منو ها به هم میریزن و زیر هم قرار میگیرن به نظر شما مشکل از کجاست ؟ من حتما باید این منو را برای اینترنت اکسپلورهای قدیمی راه اندازی کنم لطفا کمک کنید.

  52. سلام
    من تا مرحله header رو انجام دادم
    و دسته هم میاد

    وقتی گام دوم کد رو تو قسمت style.css میزارم عملی انجام نمیده

  53. سمیرا

    سلام خسته نباشید من سایتم چند زبانس و میخوام وقتی رو زبان انگلیسی میره منو که تو سایدبار راسته بیاد چپ.اما نمیدونم چه جوری باید اینکارو بکنم میشه راهنمایی کنید ممنونم.اینم آدرس سایته kasrasang.ir

  54. rshaak

    سلام…
    خسته نباشید…
    چجوری باید کد های html رو به منو اختصاص داد؟؟؟

  55. harpak

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

کاربر گرامی برای ارسال دیدگاه اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.