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

آموزش ساخت منوی وردپرس – ساخت فهرست وردپرس همراه فیلم آموزشی

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

پیش نمایش از منوی که توی این اموزش طراحی میکنم

وقتی که میخواهید که منوی وردپرس اضافه کنید ؟

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

شما می توانید آیتم های منو را از یک به چند منوی تو در تو ایجاد کنید .

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

با گفتن این، بیایید نگاهی به چگونگی اضافه کردن سفارشی منوهای سفارشی وردپرس در موضوع خود داشته باشیم.

برای فعال سازی منوی وردپرس باید چکار کنیم ؟

ما در این آموزش وردپرس برای شما آموزش خواهیم داد که چطور این کار را انجام دهید.

برای اضافه کردن یک منو سفارشی، اولین چیزی که باید انجام دهید این است که یک فایل به نام functions.php در تم خود بسازید .

register_nav_menus(array( 'menu'=>'منوی اصلی' ));

1	register_nav_menus(array( 'menu'=>'منوی اصلی' ));

کد های بالا داخل فایل functions.php قرار دهید .

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

برای نمایش تمام کدهای مورد نیاز باید عضو سایت شوید .

برای این که کی منو داخل ودرپرس دشته باشید یاید فایل بنام index.php بسازیم

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>آموزش ساخت منوی وردپرس حرفه ای</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="style.css">

  
</head>

<body>

  <nav>
  <ul class='menu'>
    <li><a href="https://7reply.com/">خانه</a></li>
    <li><a target="_blank" href="https://7reply.com/product-category/courses-excel/">دوره جامع اکسل ۲۰۱۶</a>
      <ul>
        <li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>
        <li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>
        <li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>
        <li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>
        <li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>
        <li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>
        <li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>
      </ul>
    </li>
    <li ><a href='#'>دوره طراحی قالب وردپرس</a>
      <ul>
        <li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>
        <li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>
        <li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>
        <li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>
        <li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>
        <li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>
        <li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>
      </ul>
    </li>
    <li><a href='#'>طراحی های سه بعدی</a>
      <ul>
        <li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>
        <li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>
        <li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>
        <li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>
        <li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>
        <li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>
        <li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>
      </ul>
    </li>
    <li><a href='#'>قالب حرفه ای وردپرس</a></li>
    <li><a href='#'>آموزش های رایگان </a></li>
  </ul>
</nav>
  
  

</body>

</html>

<!DOCTYPE html>

<head>

<title>آموزش ساخت منوی وردپرس حرفه ای</title>

</head>

<body>

<nav>

<ul>

<li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>

<li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>

<li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>

<li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>

<li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>

<li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>

<li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>

</ul>

</li>

<li ><a href='#'>دوره طراحی قالب وردپرس</a>

<ul>

<li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>

<li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>

<li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>

<li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>

<li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>

<li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>

<li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>

</ul>

</li>

<li><a href='#'>طراحی های سه بعدی</a>

<ul>

<li><a href="https://7reply.com/product/excel-phonebook/">دفترچه تلفن پیشرفته در اکسل</a></li>

<li><a href="https://7reply.com/product/sales-invoice-excel/">صدور فاکتور فروش در اکسل</a></li>

<li><a href="https://7reply.com/product/ex-inventory/">انبارداری هوشمند در اکسل ۲۰۱۶</a></li>

<li><a href="https://7reply.com/product/excel-login-form/">ساخت فرم لاگین در اکسل</a></li>

<li><a href="https://7reply.com/product/painel-do-excel/">داشبورد حرفه ای</a></li>

<li><a href="https://7reply.com/product/excel/">حسابداری پیشرفته</a></li>

<li><a href="https://7reply.com/product/excel-lock/">قفل گذاری روی اطلاعات</a></li>

</ul>

</li>

<li><a href='#'>قالب حرفه ای وردپرس</a></li>

<li><a href='#'>آموزش های رایگان </a></li>

</ul>

</nav>

</body>

</html>

بعد از ساخت فایل index.php کد ها بالا را به صورت کامل کپی کرده و داخل فایل index.php قرار دهید .

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

آموزش ساخت ابزارک widgets در وردپرس - به صورت فیلم آموزشی

برای فایل های css باید یک فایل style.css بسازیید .

.menu,
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.menu {
  background: #252525;
  height: 35px;
  width: 100%;
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030
}

.menu li {
  background: #252525
}

.menu > li {
  display: block;
  float: right;
  position: relative;
  box-shadow: 2px 0 0 0 rgba(51, 51, 51, 1)
}

.menu a {
  border-left: 3px solid rgba(0, 0, 0, 0);
  color: gray;
  display: block;
  font-family: Electrolize, sans-serif;
  font-size: 18px;
  line-height: 35px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 25px
}

.menu a:first-letter {
  color: #0091d6
}

.menu li:hover {
  background-color: #1c1c1c
}

.menu li:hover > a {
  border-left: 3px solid #0091d6;
  color: #fff
}

.menu ul {
  right: 0;
  max-height: 0;
  position: absolute;
  top: 100%;
  z-index: 0;
  perspective: 400px;
  width: 210%
}
<div style="clear:both; margin-top:1.5em; margin-bottom:1.5em;"><a href="https://7reply.com/dupliucator/" target="_blank" rel="dofollow" class="IRPP_ruby"><!-- INLINE RELATED POSTS 2/3 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 0.7; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #C0392B; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #E74C3C; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #000000; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://7reply.com/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div class="postImageUrl" style="background-image:url(https://7reply.com/wp-content/uploads/2017/10/wordpress-duplicator7reply-com-.jpg);"></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText">دوست عزیز پیشنهاد میشه این مطلب را هم ببینید </div><div style="clear:both"></div><div class="postTitle">آموزش ساخت بسته نصب آسان وردپرس با dupliucator +فیلم</div></div></div><div class="ctaButton"></div></div></a></div>
.menu ul li {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity .4s, transform .5s;
  border-bottom: 2px solid #181818;
  border-top: 2px solid #303030;
  text-align: right;
}

.menu ul li:hover a {
  border-right: 3px solid #454545;
  color: #fff
}

.menu > li:hover ul,
.menu > li:focus ul {
  max-height: 2000px;
  z-index: 10
}

.menu > li:hover ul li,
.menu > li:focus ul li {
  opacity: 1;
  transform: none
}

.menu li:hover ul li:nth-child(1) {
  transition-delay: 0s
}

.menu li:hover ul li:nth-child(2) {
  transition-delay: 50ms
}

.menu li:hover ul li:nth-child(3) {
  transition-delay: 100ms
}

.menu li:hover ul li:nth-child(4) {
  transition-delay: 150ms
}

.menu li:hover ul li:nth-child(5) {
  transition-delay: 200ms
}

.menu li:hover ul li:nth-child(6) {
  transition-delay: 250ms
}

.menu li:hover ul li:nth-child(7) {
  transition-delay: 300ms
}

.menu li:hover ul li:nth-child(8) {
  transition-delay: 350ms
}

ul li:nth-child(1) {
  transition-delay: 350ms
}

ul li:nth-child(2) {
  transition-delay: 300ms
}

ul li:nth-child(3) {
  transition-delay: 250ms
}

ul li:nth-child(4) {
  transition-delay: 200ms
}

ul li:nth-child(5) {
  transition-delay: 150ms
}

ul li:nth-child(6) {
  transition-delay: 100ms
}

ul li:nth-child(7) {
  transition-delay: 50ms
}

ul li:nth-child(8) {
  transition-delay: 0s
}

.menu > li:nth-child(1) {
  border-right: 2px solid #111
}

.menu > li:nth-child(2),
.menu > li:nth-child(3),
.menu > li:nth-child(4),
.menu > li:nth-child(5),
.menu > li:nth-child(6),
.menu > li:nth-child(7),
.menu > li:nth-child(8) {
  border-right: 2px solid #111;
  border-left: 2px solid #333
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

.menu,

.menu ul {

list-style: none;

margin: ;

padding:

}

.menu {

background: #252525;

height: 35px;

width: 100%;

border-bottom: 2px solid #181818;

border-top: 2px solid #303030

}

.menu li {

background: #252525

}

.menu > li {

display: block;

float: right;

position: relative;

box-shadow: 2px rgba(51, 51, 51, 1)

}

.menu a {

border-left: 3px solid rgba(, , , );

color: gray;

display: block;

font-family: Electrolize, sans-serif;

font-size: 18px;

line-height: 35px;

text-decoration: none;

text-transform: uppercase;

padding: 25px

}

.menu a:first-letter {

color: #0091d6

}

.menu li:hover {

background-color: #1c1c1c

}

.menu li:hover > a {

border-left: 3px solid #0091d6;

color: #fff

}

.menu ul {

right: ;

max-height: ;

position: absolute;

top: 100%;

z-index: ;

perspective: 400px;

width: 210%

}

.menu ul li {

opacity: ;

transform: rotateY(90deg);

transition: opacity .4s, transform .5s;

border-bottom: 2px solid #181818;

border-top: 2px solid #303030;

text-align: right;

}

.menu ul li:hover a {

border-right: 3px solid #454545;

color: #fff

}

.menu > li:hover ul,

.menu > li:focus ul {

max-height: 2000px;

z-index: 10

}

.menu > li:hover ul li,

.menu > li:focus ul li {

opacity: 1;

transform: none

}

.menu li:hover ul li:nth-child(1) {

transition-delay: 0s

}

.menu li:hover ul li:nth-child(2) {

transition-delay: 50ms

}

.menu li:hover ul li:nth-child(3) {

transition-delay: 100ms

}

.menu li:hover ul li:nth-child(4) {

transition-delay: 150ms

}

.menu li:hover ul li:nth-child(5) {

transition-delay: 200ms

}

.menu li:hover ul li:nth-child(6) {

transition-delay: 250ms

}

.menu li:hover ul li:nth-child(7) {

transition-delay: 300ms

}

.menu li:hover ul li:nth-child(8) {

transition-delay: 350ms

}

ul li:nth-child(1) {

transition-delay: 350ms

}

ul li:nth-child(2) {

transition-delay: 300ms

}

ul li:nth-child(3) {

transition-delay: 250ms

}

ul li:nth-child(4) {

transition-delay: 200ms

}

ul li:nth-child(5) {

transition-delay: 150ms

}

ul li:nth-child(6) {

transition-delay: 100ms

}

ul li:nth-child(7) {

transition-delay: 50ms

}

ul li:nth-child(8) {

transition-delay: 0s

}

.menu > li:nth-child(1) {

border-right: 2px solid #111

}

.menu > li:nth-child(2),

.menu > li:nth-child(3),

.menu > li:nth-child(4),

.menu > li:nth-child(5),

.menu > li:nth-child(6),

.menu > li:nth-child(7),

.menu > li:nth-child(8) {

border-right: 2px solid #111;

border-left: 2px solid #333

}

بعد از ساخت فایل style.css کد های بالا را به صورت کامل کپی کرده و داخل فایل style.css قرار دهید تمام.

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

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

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

<?php $args = array( 'theme_location'=>'main',);
wp_nav_menu($args);
?>

<?php $args = array( 'theme_location'=>'main',);

wp_nav_menu($args);

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

میانگین امتیازات ۵ از ۵

از مجموع ۱ رای

آموزش ساخت منوی وردپرس – ساخت فهرست وردپرس همراه فیلم آموزشی

وقتی که میخواهید که منوی وردپرس اضافه کنید ؟

برای فعال سازی منوی وردپرس باید چکار کنیم ؟

آموزش نمایش تعداد بازدید مطالب وردپرس بدون افزونه

آموزش نمایش تعداد بازدید مطالب وردپرس wp postviews

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

نظر یا سوال شما در این مورد چیست؟ انصراف