/ آموزش تبدیل قالب html به وردپرس
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 4 از 4

موضوع: آموزش تبدیل قالب html به وردپرس

  1. #1
    ROACH آنلاین نیست.
    ROACH
    کاربر سايت
    170نوشته242مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2724
    پسندیده است
    71 پست
    بلاگ
    پست
    میزان امتیاز
    252
    http://assassinsorder.com

    آموزش تبدیل قالب html به وردپرس

    درود دوستان
    در این تاپیک میخوایم آموزش تبدیل قالب html به وردپرس رو بگیم
    این تاپیک بر فرض این که شما html و css میدونید ایجاد شده
    پس اگر با این زبان ها آشنا نیستید بهتون پیشنهاد میکنم آموزش های html و css سایت رو بخونید.
    تصمیم گرفتم تمپلیت IWeb-98 که قبلا کد شده رو دوباره کد کنم
    یه سری ادیت کردم و یه سری اجزا مثل اسلایدر رو برداشتم که راحت باشیم در آموزش
    پوسته در پست اول پیوست میشه و اگر میخواید با ما پیش برید دانلودش کنید
    تا ساعاتی بخش اول رو قرار میدم چون میخوام پست ها جدا از هم باشه
    از مدیران هم درخواست مهم کردن تاپیک رو دارم و البته اشاره کنم همزمان در مراجع دیگه هم پاب میشه و منبع اصلیش هم این تاپیک هست.
    http://www.moderndesigners.ir/Forum/...%B1%D8%B3-392/
    هیچ جنبه تبلیغاتی نداره و قصدمون افزایش آگاهی دوستان هست
    موفق باشید
    فايل هاي پيوست شده فايل هاي پيوست شده

    6 نفر از اعضا پست ROACH را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. نوين وردپرس تبلیغات شما

  3. #2
    ROACH آنلاین نیست.
    ROACH
    کاربر سايت
    170نوشته242مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2724
    پسندیده است
    71 پست
    بلاگ
    پست
    میزان امتیاز
    252
    http://assassinsorder.com

    جدا سازی کد ها و include

    خب این اولین بخش از آموزشه و ما میخوایم
    انتقال پوسته استاتیک
    اولین و مهم ترین بخش انتقال پوسته به پوشه themes هست که در wp-content قرار داره.
    پوسته رو منتقل کنید و یک اسم بذارید که هیچ فاصله ای داخلش نباشه و ترجیحا فواصل رو با دش "-" جدا کنید مثل IWeb-New

    ساخت پوشه های اصلی
    سه فایل اصلی در وردپرس هست.
    index.php
    header.php
    footer.php
    سه فایل با این اسامی و فرمت در پوشه ی پوسته ای که دارید میسازید (ما فرضا از IWeb-New استفاده میکنیم ) بسازید.

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

    کد HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <link href="style.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('aside').css("height",$('.content').height());
                });
            </script>
            <meta charset="UTF-8" />
            <meta name="Description" content="رضا ارمی طراح وب و توسعه دهنده | Reza Erami Web Designer & Developer" />
            <meta name="keywords" content="Reza,Erami,رضا,ارمی,طراح وب,توسعه دهندهپ,wep developer,web designer" />
            <title>Reza Erami Personal Blog</title>
        </head>
        <body>
            <header>
                <section class="logo">
                    <a href="#" title="لورم ایپسوم"><img  src="img/logo.png" width="82" height="82" alt="لورم ایپسوم" title="لورم  ایپسوم" /></a>
                    <ul>
                        <li><a href="#" title="لورم ایپسوم"><h1>طراحان نوین</h1></a></li>
                        <li><h2>مرجع تخصصی وبمستران ایرانی</h2></li>
                    </ul>
                </section>
                <section class="header_contain">
                    <div class="contact">
                        <a href="#" title="لورم ایپسوم">تماس با ما</a>
                    </div>
                    <form class="search_form" method="get" action="http://173.194.65.102/search" target="_blank">
                        <input type="hidden" name="domains" value="moderndesigners.ir">
                        <input type="hidden" name="sitesearch" value="moderndesigners.ir">
                        <input type="submit" value="" name="submit">
                        <input type="text" placeholder="کلمه مورد نظر را وارد نمایید." name="query">
                    </form>
                </section>
            </header>
            <nav>
                <div>
                    <ul>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    </li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
    این کد ها رو در index.html پیدا کنید ، اون ها رو کپی و در header.php پیست کنید.

    خب حالا نوبت به جدا سازی فوتر قالب میشه
    کد های زیر رو از index.php پیدا کنید ، اون ها رو کپی و در footer.php پیست کنید.
    کد HTML:
            <footer>
                <section class="about_us">
                    <h5>درباره ما</h5>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم  از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه  روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی  تکنولوژی مورد نیاز </p>
                </section>
                <section class="centered_footer">
                    <section class="social">
                        <div class="tweeter"><a href="#" title="Tweeter"></a></div>
                        <div class="facebook"><a href="#" title="Facebook"></a></div>
                        <div class="rss"><a href="#" title="RSS"></a></div>
                    </section>
                    <div class="copyright">
                        <span>تمامی حقوق محفوظ است برای <a  href="http://www.ModernDesigners.ir/" title="Modern Designers | طراحان  نوین">Modern Designers</a> .</span>
                        <span>طراحی : <a href="http://igraph.ir/"  title="IGraph Studio">IGraph Studio</a> کدنویسی : <a  href="http://www.ModernDesigners.ir/" title="Modern Designers | طراحان  نوین">Modern Designers</a></span>
                    </div>
                </section>
                <section class="friends">
                    <h5>دوستان ما</h5>
                    <ul>
                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                    </ul>
                </section>
            </footer>
        </body>
    </html>
    در آخر کل کد های باقی مونده که بدنه اصلی هست رو در index.php بریزید.

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

    حالا وارد صفحه اصلی سایت بشید.
    صفحه ساده بدون هدر ، فوتر و هیچ سی اس اسی هم نداره

    خب اول باید هدر و فوتر رو include کنیم.
    این کار رو میشه با تابع include که خود php ارائه داده انجام بدیم یا این که از تابع get_header و get_footer که وردپرس در اختیار ما گذاشته انجام بدیم
    بهتون پیشنهاد میکنم از توابع وردپرس استفاده کنید.

    خب حالا وارد index.php ّشید
    کد زیر رو پیدا کنید (اگر مراحل رو به درستی انجام داده باشید این کد اولین خط هست.)
    کد HTML:
    <section class="body_Wrapper">
    حالا درست قبلش کد زیر رو قرار بدید.
    کد PHP:
    <?php get_header();?>
    خب حالا اخرین خط فایل index.php رو نگاه کنید.
    نوشته شده
    کد HTML:
    </section>
    درست بعدش کد زیر رو بذارید.
    کد PHP:
    <?php get_footer();?>
    خب ذخیره کنیدش و الان صفحه اصلی سایت رو ببنید.
    فایل ها اینکلود شدن اما هنوز css در کاری نیست
    برای لینک فایل سی اس اس میتونید wp-content/themes/IWeb-New/style.css استفاده کنید ، اما فرض کنید اسم قالب یه چیز دیگه باشه ، پس این کار درست نیست که از یک لینکی که ممکنه هر سری فرق کنه استفاده کنید.
    خوب وردپرس یه تابعی داره با اسم bloginfo که آرگومان دریافتیش به صورت رشته هست و مقادیر مختلفی داره
    یکی از این مقادیر stylesheet_url هست که آدرس فایل style.css رو بر میگردونه
    وارد header.php بشید و کد زیر رو پیدا کنید.
    کد HTML:
    <link href="style.css" rel="stylesheet" type="text/css" />
    حالا به جای style.css کد زیر رو قرار بدید.
    کد PHP:
    <?php bloginfo('stylesheet_url');?>
    خب اینم از این ، سایت رو رفرش بدید و میبینید که قالب سی اس اس داره الان، اما هنوز مونده ، عکس ها بارگذاری نمیشن
    ما با عکس مطالب اصلا کاری نداریم چون به جاشون بعدا شاخص میذاریم ، اما الان لوگو مشکل ساز شده.
    دقیقا از تابع bloginfo استفاده میکنیم اما این بار با رشته template_url
    این آرگومان خروجی آدرس پوسته ما رو داره
    کد زیر رو در header.php پیدا کنید
    کد HTML:
    <img src="img/logo.png" width="82" height="82" alt="لورم ایپسوم" title="لورم ایپسوم" />
    خب حالا به جای img/logo.png کد زیر رو میذاریم.
    کد PHP:
    <?php bloginfo('template_url');?>/img/logo.png
    اینطوری قبل از آدرس عکس ، آدرس پوشه ی پوسته ما قرار میگیره

    خب برای اسکریپت جی کوئری که قرار داده شده هم باید همین کار انجام بشه
    پس کد زیر رو هم پیدا میکنیم.
    کد HTML:
    <script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
    در اون به جای script/jquery-1.9.1.min.js کد زیر رو میذاریم.
    کد PHP:
    <?php bloginfo('template_url');?>/script/jquery-1.9.1.min.js
    تمومه ، و الان جی کوئری هم که دو پوسته وجود داشت الان در صفحه اصلی لود میشه.

    در مرحله بعدی نیاز به جدا سازی ساید بار داریم، اگر یادتون باشه در ابتدای آموزش گفتم که بدنه اصلی شامل ساید بار و محتوا میشه، پس یک فایل دیگه میسازیم در پوستمون به اسم sidebar.php و کد های زیر رو در index.php پیدا میکنیم و همشونو cut میکنیم و ذر sidebar.php قرار میدیم.
    کد HTML:
                <aside>
                    <section class="block">
                        <div class="title">لورم ایپسوم</div>
                        <div class="clear"></div>
                        <ul>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                        </ul>
                    </section>
                    <section class="block">
                        <div class="title">لورم ایپسوم</div>
                        <div class="clear"></div>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی  نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون  بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی  تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می  ...</p>
                    </section>
                    <section class="block">
                        <div class="title">لورم ایپسوم</div>
                        <div class="clear"></div>
                        <ul>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                            <li>
                                <div class="thumbnail"><img  src="img/sidebar_thumbnail.png" width="55" height="55" alt="لورم ایپسوم"  title="لورم ایپسوم" /></div>
                                <div class="post_info">
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <time datetime="21/مارس/2014">21/مارس/2014</time>
                                </div>
                            </li>
                        </ul>
                    </section>
                    <section class="block">
                        <div class="title">لورم ایپسوم</div>
                        <div class="clear"></div>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی  نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون  بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و ب...</p>
                    </section>
                </aside>
    خب حالا به جای کد هایی که cut کردیم از index.php کد زیر رو قرار میدیم
    کد PHP:
    <?php get_sidebar();?>
    اگر تا این جا درست رفته باشید دقیقا قبل از اون Section باید باشه که بعدش footer اینکلود شد. ( این جمله سنگین بود چند بار بخونید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی )

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

    5 نفر از اعضا پست ROACH را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    ROACH آنلاین نیست.
    ROACH
    کاربر سايت
    170نوشته242مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2724
    پسندیده است
    71 پست
    بلاگ
    پست
    میزان امتیاز
    252
    http://assassinsorder.com
    درود
    با بخش دوم آموزش طراحی پوسته وردپرس در خدمت شما عزیزان هستیم.
    در این آموزش داینامیک سازی header که از بخش head (اطلاعات سایت) و ناوبار تشکیل میشه ، و همچنین داینامیک سازی ساید بار رو توضیح خواهیم داد.

    head از meta tags و title تشکیل میشه که باید با سایت هماهنگ بشه.
    ناوبار با فهرست دلخواه ، ساید بار هم با ابزارک ها هماهنگ میشه

    خب اول از همه باید اشاره کنم که قبل از کل اینا باید هوک ها که بعث سازگاری افزونه ها میشن روی سایت اجرا بشن.
    دو تابع داره که باید اولی در header.php و دومی در footer.php قرار بگیره.

    سازگاری با افزونه ها
    فایل header.php رو باز کنید و کد زیر رو قبل از پایان head یعنی تگ
    کد HTML:
    </head>
    قرار بدید.
    کد PHP:
    <?php wp_head();?>
    در مرحله بعد فایل footer.php رو باز کنید و درست قبل از
    کد HTML:
    </body>
    کد زیر رو قرار بدید.
    کد PHP:
    <?php wp_footer();?>
    خب اگر الان سایتتونو ببینید ادمین بار بالای سایت اضافه شده.

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

    خب اول کد زیر رو پیدا میکنیم
    کد HTML:
            <meta charset="UTF-8" />
            <meta name="Description" content="رضا ارمی طراح وب و توسعه دهنده | Reza Erami Web Designer & Developer" />
            <meta name="keywords" content="Reza,Erami,رضا,ارمی,طراح وب,توسعه دهندهپ,wep developer,web designer" />
            <title>Reza Erami Personal Blog</title>
    به جای کلشون کد های زیر رو میذاریم.

    کد HTML:
            <!--<meta name="keywords" content="<?php  //if(is_home() || is_category() || is_archive()) {echo  get_option('md_keywords');} elseif(is_single() || is_page()) {$keywords =  get_the_tags();if( $keywords ) {foreach($keywords as $keyword) {echo  $keyword->name . ',';}};}?>">-->
            <meta name="description" content="<?php if ( is_single() )  { single_post_title('', true); } else {bloginfo('name'); echo " - ";  bloginfo('description');} ?>" />
            <title><?php if (is_home () ) { bloginfo('name'); }  elseif ( is_category() ) { single_cat_title(); echo ' - ' ;  bloginfo('name'); } elseif (is_single() ) { single_post_title(); echo ' -  '; bloginfo('name'); } elseif (is_page() ) { bloginfo('name'); echo ':  '; single_post_title(); } else { wp_title('',true); }  ?></title>
    خب میخوایم کد های بالا رو به جز خط اولش که متا تگ کلمات کلیدی هست رو توضیح بدیم چون این مربوط به پنل میشه اما بقیشون مربوط به خود تنظیمات وردپرس.

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

    به تایتل میرسیم، تایتل کاملا شرطی تعریف شده.
    اگر پست بود عنوان پست - عنوان سایت ، اگر صفحات بود ، عنوان صفحه : عنوان سایت ، اگر دسته ها بودن ، عنوان دسته - عنوان سایت و اگر هم هیچی نبود که تابع wp-title که خودش اوتوماتیک تایتل میذاره فراخوانی میشه.

    خب این head ما که کامل شد.

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

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

    ابتدا کد های زیر رو اضافه میکنیم به فایل فانکشنمون
    کد PHP:
    <?php
        
    if ( function_exists('register_sidebar') ) {
            
    register_sidebar(array(
                
    'name' => 'ساید بار اصلی',
                
    'id' => 'sidebar',
                
    'before_widget' => '<section class="block">',
                
    'after_widget' => '</section>',
                
    'before_title' => '<h5 class="title">',
                
    'after_title' => '</h5><div class="clear"></div>'
           
    ));
        }
        function 
    register_my_menus() {
            
    register_nav_menus(
                array(
    'main-menu' => __'منوی اصلی' ))
            );
        }
        
    add_action'init''register_my_menus' );
    ?>
    تشریح کد های بالا :
    اولین فانکشنی که قرار داده شده پشتیبانی از ابزارک رو ابتدا چک میکنه
    اگر وجود داشت ازش استفاده میکنه به این شکل که یک نام داره که در مدیریت سایت در ابزارک ها نمایش میده، دومی ای دی ساید بار ما هست. آرایه های سوم و چهارم کد های قبل و بعد از هر بلاک یا ابزارک هستن و کد های آخر هم کد های قبل و بعد از عنوان هر بلاک یا ابزارک هستن.

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

    اضافه کردن ناوبار
    نوبت میرسه به فراخوانی هر یک از توابعی که فعلا اضافه کردیم.
    ابتدا وارد header.php میشیم.
    کل کد های ناوبارمون که در زیر مشاهده رو پاک میکنیم
    کد HTML:
                <div>
                    <ul>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    </li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li>
                                    <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                    <ul>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                        <li>
                                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                                            <ul>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" title="لورم ایپسوم">لورم ایپسوم</a>
                            <ul>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                                <li><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
    حالا به جاشون کد زیر رو میذاریم.
    کد PHP:
    <?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) );?>
    خب این کد رو اگر بهش دقت کنید متوجه میشید که داخلش main-menu قرار داره و اگر به فانکشن هامون بخش کد ناوبار نگاه کنید دقیقا main-menu رو اونجا هم خواهید دید.
    هر چیزی که اونجا نوشته شده بود برای ایدی دقیقا همینجا هم باید باشه و اگر فرضا شما چند تا فهرست دلخواه داشتید هر کدوم یک آیدی در فانکشن برای ایجاد شدن میگیرن و متناسب با فهرستی که قراره نمایش داده بشه در سایت فراخوانی میشن.

    اضافه کردن ابزارک ها
    خب این بخش آخر نسبتا مهمه
    ما بعدا میخوایم یک loop مخصوص واسه یه بخش از ساید بار بنویسیم
    اما فعلا به کد هایی که داخلش هست هیچ نیازی نداریم
    فایل sidebar.php رو باز کنید.
    بلوک های مختلف رو مشاهده میکنید اما فعلا هیچ کدومشونو نیاز نداریم.
    قبل از این که کد ها رو پاک کنید ساختارشون رو نگاه کنید.
    مثلا این یکی از بلوک های ماست.
    کد HTML:
                    <section class="block">
                        <div class="title">لورم ایپسوم</div>
                        <div class="clear"></div>
                        <p>لورم ایپسوم متن ساختگی با تولید سادگی   نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون   بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی   تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می   ...</p>
                    </section>
    میبینید که قبل از بلوک ما
    کد HTML:
    <section class="block">
    و بعدش هم
    کد HTML:
     </section>
    هست و قبل از تایتلش
    کد HTML:
    <div   class="title">
    و بعدش هم
    کد HTML:
    </div>
    هست.
    برمیگردیم به فایل function.php و کد ساید بار رو میبینیم
    قبل از ابزارک دقیقا کدی که بالا گفتیم و بعدش هم دقیقا همون
    قبل از تایتل هم البته به h5 تغییر داده شده ولی کلاسش همونه دقیقا
    پس هر چیزی که توی طرحتون بود دقیقا باید توی فانکشن باشه.
    خوب حالا که نکته رو متوجه شدید کل کد های داخل فایل ساید بار رو به جز
    کد HTML:
    <aside>
    و </aside> پاک کنید.
    حالا به جاش کد زیر رو بذارید.
    کد PHP:
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar')): endif;?>
    این کد میاد اول فانکشن dynamic_sidebar رو اگر false بود نقیض میکنه (میشه true) اگر هم نه که میره سراغ بدی تا ببینه با پاس شدن مقدار sidebar به dynamic_sidebar جوابی میگیره یا نه.
    حالا باز بر میگردیم به function.php این Sidebar که اینجا در sidebar.php پاس شده دقیقا همون Sidebar هست که در تابع مورد نظر به عنوان id قرار گرفته.

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

    یه نکته ای هم بگم
    این پوسته ای که فعلا پیوست شده فایل function ـش کد های بیشتری داره که گذاشتم بمونن تو فایل و در اموزش های بعدی که نیازمون میشه فقط تشریح کنیمشون
    ساید بار هم یکی از بلاک ها که اشاره کردم داخلش باید loop بیاد رو پاک نکردم و کامنت کردم
    وسلام
    در این آموزش ما head و navbar و sidebar رو به ترتیب به تنظیمات ، فهرست دلخواه و ابزارک ها متصل کردیم.
    موفق باشید
    فايل هاي پيوست شده فايل هاي پيوست شده

    3 نفر از اعضا پست ROACH را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  5. #4
    ROACH آنلاین نیست.
    ROACH
    کاربر سايت
    170نوشته242مورد پسند

    تاریخ عضویت
    Aug 2013
    شماره عضویت
    2724
    پسندیده است
    71 پست
    بلاگ
    پست
    میزان امتیاز
    252
    http://assassinsorder.com
    درود دوستان عزیز
    در این آموزش قصد داریم تا دو حلقه از وردپرس رو به شما عزیزان معرفی کنیم.
    حلقه های وردپرس

    وردپرس حلقه های مختلفی برای نمایش مطالب داره که میتونیم از حلقه عادی ، wp_query و post_query استفاده کنیم ، هر یک قابلیت هایی دارن که توضیح میدیم.
      1. حلقه عادی حلقه ای هست که مطالب رو بدون نیاز به هیچ تنظیمات خاصی نشون میده، این حلقه امکان تنظیم روی یک دسته رو از طریق function ها و توسط add_filter داره که از توابع خود وردپرس هست ، و باید تابعی نوشته بشه که دسته ها رو در صفحه اصلی ممنوع کنه (در این آموزش به این نکته هم اشاره میکنیم)
      2. مورد دوم wp_query که خیلی شبیه post_query هست، این حلقه میتونه یک آرایه رو در خودش به عنوان تنظیمات جا بده که عبارتند از :
        • صفحه بندی
        • تعداد
        • نوع مرتب سازی
        • و ...


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

    خب اولین کاری که نیاز هست انجام بدیم اینه که اضافات رو پاک کنیم
    از کد زیر سه بار تکرار شده که باید دوتاش رو پاک کنید و فقط یکیشو نیاز داریم.
    کد HTML:
    <article> 	<div class="thumbnail"><img src="img/articles.jpg" width="200" height="125" alt="لورم ایپسوم" title="لورم ایپسوم"></div> 	<h3><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></h3> 	<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </p> 	<time datetime="21/مارس/2014">21/مارس/2014</time> 	</article>
    این کد هم همینطور ، فقط یه بارشو میخوایم.
    کد HTML:
    <article> 		<ul> 			<li><a href="#" title="لورم ایپسوم"><h3>لورم ایپسوم</h3></a></li> 			<li><time datetime="21/مارس/2014">21/مارس/2014</time></li> 			<li><span>توسط : ROACH</span></li> 		</ul> 		<div class="thumbnail"><img src="img/global.jpg" alt="لورم ایپسوم" title="لورم ایپسوم" width="135" height="135" /></div> 		<div class="clear"></div> 		<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می ...</p> 		<div class="clear"></div> 		<a class="more" href="#" title="لورم ایپسوم">ادامه مطلب</a> 	</article>
    خب بعد از این کار اگر صفحه سایت رو ببینید فقط یک بار از هر مطلب اومده و البه عکسش هم وجود نداره. خب حالا میخوایم روی حلقه اصلی کار کنیم ، یعنی مطالب عادی نه اون مطالب ویژه ، پس به کد هاش نگاه میکنیم (همین کدهایی که بالا نوشته شده) و اگر یه تحلیلی بخوایم کنیم میبینیم که تایتل داره ، تاریخ داره ، نام نویسنده و تصویر شاخص داره و در آخر هم توضیحات کوتاهی از مطلب و یک دکمه ادامه مطلب داره پس کدهای اون رو به شکل زیر ادیت میکنیم
    کد HTML:
    	<article> 		<ul> 			<li><a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><h3><?php the_title();?></h3></a></li> 			<li><time datetime="<?php the_time('Y-m-d');?>"><?php the_time('j F');?></time></li> 			<li><span>توسط : <?php the_author();?></span></li> 		</ul> 		<?php if(has_post_thumbnail()) echo "<div class=\"thumbnail\">".get_the_post_thumbnail()."</div>";?> 			<div class="clear"></div> 		<?php the_excerpt();?> 		<div class="clear"></div> 		<a class="more" href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">ادامه مطلب</a> 	</article>
    توضیحات :

    1. کد HTML:
      <a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><h3><?php the_title();?></h3></a>
      برای ایجاد لینک مطلب هست ، در اون تابع
      کد PHP:
      <?php the_permalink();?>
      لینک مطلب رو ایجاد میکنه و
      کد PHP:
      <?php the_title_attribute();?>
      برای ایجاد عنوان مطلب در title هست ، دلیل استفاده از این تابع هم اینه که ممکنه ر عنوان مطلب کوتیشن (") یا کاراکتر های غیر مجاز وجود داشته باشه و تایتل مطلب رو به هم بریزه و در آخر هم
      کد PHP:
      <?php the_title();?>
      برای ایجاد عنوان عادی مطلب هست.
    2. تگ time دارای خاصیت datetime به صورت اجباری هست و چیزی که نمایش میده تاریخ یا اسم یا هر چیزی میتونه باشه ولی چیزی که مهمه همون datetime هست که باید قالب بندیش به شکل Year-month-day است پس ما در datetime از کد
      کد PHP:
      <?php the_time('Y-m-d');?>
      استفاده میکنیم که به ترتیب سال ماه روز از چپ به راست و با خط فاصله جدا شده ولی داخلش از
      کد PHP:
      <?php the_time('j F');?>
      استفاده کردیم که فقط عنوان ماه و عدد روز رو نشون بده مثل 20 ژوئن

    3. کد PHP:
      <?php the_author();?>
      برای نمایش نام نویسنده هست.
    4. توابع وردپرس رو در صورتی که بخوایم در echo استفاده کنیم عموما باید اولشون get_ اضافه کنیم که اصطلاحا returnable یا برگشت پذیر نباشن تا بتونیم در echo ازشون استفاده کنیم. پس اینجا برای تولید تصویر شاخص از
      کد PHP:
      get_the_post_thumbnail() 
      استفاده کردیم ، تشریح
      کد PHP:
      <?php if(has_post_thumbnail()) echo "<div class=\"thumbnail\">".get_the_post_thumbnail()."</div>";?>
      به این شکله که در صورت وجود تصویر شاخص اون رو به همراه یک div با کلاس thumbnail تولید کن.
    5. بعد از اون با ]PHP]<?php the_excerpt();?>[/PHP] شرحی از مطلب با طول رشته 400 کاراکتر (اگر اشتباه نکنم) تولید میکنه.
    6. در آخر هم دکمه ادامه مطلب رو داریم که توابع استفاده شده رو قبلا توضیح دادیم.

    خب اما همینجا تموم نمیشه کار ما، درست قبل از
    کد HTML:
    <article>
    کد زیر رو قرار میدیم
    کد PHP:
    <?php while(have_posts()) : the_post();?>
    و درست بعد از
    کد HTML:
    </article>
    هم کد زیر رو میذاریم.
    کد PHP:
    <?php endwhile;?>
    خب این کد اون article ما رو داخل حلقه میذاره که به تعداد مطالبی که در تنظیمات -> خواندن تنظیم کردیم برای مطالب صفحه ی اصلی تکرار میشهمثلا اگر اونجا نوشته باشیم 5 اینجا 5 تا از اخرین مطالب میاد.اما هنوز هم تموم نشده و یه چیزی جا مونده ، یک if برای این که اگر هیچ مطلبی وجود نداشت global_content اصلا ایجاد نشهپس قبل از
    کد HTML:
    <section class="global_content">
    کد زیر رو میذاریم
    کد PHP:
    <?php if(have_posts()) : ?>
    و بعد از سکشن مربوطه به global_convent هم کد زیر رو میذاریم
    کد PHP:
    </section
    با این حساب کل کد های
    کد HTML:
    	<section class="global_content"> 		<article> 			<ul> 				<li><a href="#" title="لورم ایپسوم"><h3>لورم ایپسوم</h3></a></li> 				<li><time datetime="21/مارس/2014">21/مارس/2014</time></li> 				<li><span>توسط : ROACH</span></li> 			</ul> 			<div class="thumbnail"><img src="img/global.jpg" alt="لورم ایپسوم" title="لورم ایپسوم" width="135" height="135" /></div> 			<div class="clear"></div> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می ...</p> 			<div class="clear"></div> 			<a class="more" href="#" title="لورم ایپسوم">ادامه مطلب</a> 		</article> 		<article> 			<ul> 				<li><a href="#" title="لورم ایپسوم"><h3>لورم ایپسوم</h3></a></li> 				<li><time datetime="21/مارس/2014">21/مارس/2014</time></li> 				<li><span>توسط : ROACH</span></li> 			</ul> 			<div class="thumbnail"><img src="img/global.jpg" alt="لورم ایپسوم" title="لورم ایپسوم" width="135" height="135" /></div> 			<div class="clear"></div> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می ...</p> 			<div class="clear"></div> 			<a class="more" href="#" title="لورم ایپسوم">ادامه مطلب</a> 		</article> 		<article> 			<ul> 				<li><a href="#" title="لورم ایپسوم"><h3>لورم ایپسوم</h3></a></li> 				<li><time datetime="21/مارس/2014">21/مارس/2014</time></li> 				<li><span>توسط : ROACH</span></li> 			</ul> 			<div class="thumbnail"><img src="img/global.jpg" alt="لورم ایپسوم" title="لورم ایپسوم" width="135" height="135" /></div> 			<div class="clear"></div> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می ...</p> 			<div class="clear"></div> 			<a class="more" href="#" title="لورم ایپسوم">ادامه مطلب</a> 		</article> 		<article> 			<ul> 				<li><a href="#" title="لورم ایپسوم"><h3>لورم ایپسوم</h3></a></li> 				<li><time datetime="21/مارس/2014">21/مارس/2014</time></li> 				<li><span>توسط : ROACH</span></li> 			</ul> 			<div class="thumbnail"><img src="img/global.jpg" alt="لورم ایپسوم" title="لورم ایپسوم" width="135" height="135" /></div> 			<div class="clear"></div> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می ...</p> 			<div class="clear"></div> 			<a class="more" href="#" title="لورم ایپسوم">ادامه مطلب</a> 		</article> 	</section>
    الان باید به
    کد PHP:
        <?php if(have_posts()) : ?>         <section class="global_content">             <?php while(have_posts()) : the_post();?>                 <article>                     <ul>                         <li><a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><h3><?php the_title();?></h3></a></li>                         <li><time datetime="<?php the_time('Y-m-d');?>"><?php the_time('j F');?></time></li>                         <li><span>توسط : <?php the_author();?></span></li>                     </ul>                     <?php if(has_post_thumbnail()) echo "<div class=\"thumbnail\">".get_the_post_thumbnail()."</div>";?>                     <div class="clear"></div>                     <?php the_excerpt();?>                     <div class="clear"></div>                     <a class="more" href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">ادامه مطلب</a>                 </article>             <?php endwhile;?>         </section>     <?php endif;?>
    تبدیل شده باشه.
    خب بعد از اون میرسیم به اون مطالب ویژه
    حلقه های سفارشی

    برای این که مطالب یک دسته خاصی رو نشون بدیم از post_query استفاده میکنیم ، کد اصلی این حلقه به این شکل هست
    کد PHP:
        <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;     query_posts('showposts=' '&paged=' $paged '&category_name=' "special");?>         <?php while ( have_posts() ) : the_post(); ?>         <?php endwhile;?>     <?php wp_reset_query(); ?>
    در کد بالا عدد 3 بیانگر تعداد پست ها هست و special هم بیانگر دسته بندی که میخوایم نشونش بدیم در صفحه و paged هم یک بار عدد 1 رو بهش دادیم که صفحه پیشفرضش اول باشه و صفحه بندی رو با $paged انجام میدیم. ما یک if هم اضافه میکنیم بهش برای چک کردن وجود مطالب و توابع رو توی قالب مورد نظر پیاده میکنیم کد های مطالب ویژه در حالت اول که هیچیشو پاک نکرده بودیم این شکلی بود
    کد HTML:
    <section class="special_articls"> 		<div class="title"><a href="#" title="آموزش های ویژه سایت">آموزش های ویژه سایت</a></div> 		<div class="clear"></div> 		<article> 			<div class="thumbnail"><img src="img/articles.jpg" width="200" height="125" alt="لورم ایپسوم" title="لورم ایپسوم"></div> 			<h3><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></h3> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </p> 			<time datetime="21/مارس/2014">21/مارس/2014</time> 		</article> 		<article> 			<div class="thumbnail"><img src="img/articles.jpg" width="200" height="125" alt="لورم ایپسوم" title="لورم ایپسوم"></div> 			<h3><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></h3> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </p> 			<time datetime="21/مارس/2014">21/مارس/2014</time> 		</article> 		<article> 			<div class="thumbnail"><img src="img/articles.jpg" width="200" height="125" alt="لورم ایپسوم" title="لورم ایپسوم"></div> 			<h3><a href="#" title="لورم ایپسوم">لورم ایپسوم</a></h3> 			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. </p> 			<time datetime="21/مارس/2014">21/مارس/2014</time> 		</article> 	</section>
    خب به جاش کد های زیر رو میزاریم
    کد PHP:
        <?php         $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;         //$article_cat = get_option('md_article_category');         query_posts('showposts=' . 3 . '&paged=' . $paged . '&category_name=' . "special");         if(have_posts()) :     ?>         <section class="special_articls">             <div class="title"><a href="#" title="آموزش های ویژه سایت">آموزش های ویژه سایت</a></div>             <div class="clear"></div>             <?php while ( have_posts() ) : the_post(); ?>                 <article>                 <?php if(has_post_thumbnail()) echo "<div class=\"thumbnail\">".get_the_post_thumbnail()."</div>";?>                 <a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>"><h3><?php the_title();?></h3></a>                 <p><?php get_the_post_excerpt(100);?></p>                 <time datetime="<?php the_time('Y-m-d');?>"><?php the_time('j F');?></time>                 </article>             <?php endwhile;?>         </section>     <?php         endif;         wp_reset_query();     ?>
    خب در کد بالا انتهاش wp_reset_query داریم که پایان کوئری هست ، اگر فقط یک کوئری در صفحه باشه مشکلی پیش نمیاد ولی اگر چند تا باشه و ریست یا پایانی نداشته باشیم در نمایش اطلاعات مشکل پیش میاد یک تابع جدید هست که دستی نوشته شده و در function.php موجود هست و get_the_post_excerpt نام داره (این نام دلخواه هست و توسط کسی که فانکشن رو نوشته تعین میشه) و داخل پرانتزاش عدد 100 نوشته شده ، این عدد ارسال میشه به متد مورد نظر و محتوای پست رو تا 100 کاراکتر میگیره. در کد بالا یه خط هم کامنت شده که زمان اضافه کردن پنل بهش میپردازیم.
    خب الان مطالب دسته ویژه رو نشون دادیم و مطالب اصلی رو هم نشون دادیم ، یه مشکلی هست ، اونم اینه که اگر مطلبی در دسته ویژه باشه در بخش مربوطه نشون داده میشه ، اما در بخش مطالب عمومی هم نمایش داده خواهد شد. برای جلوگیری از این کار ما یک فانکشن (در ابتدای آموزش اشاره ای کرده بودیم) رو به فایل functions.php اضافه میکنیم
    کد PHP:
    function excludeCat($query) {         if ( $query->is_home ) {         //$special_cat = get_cat_ID(get_option('md_special_category'));         $query->set("cat", "-7");     }     return $query; } add_filter('pre_get_posts', 'excludeCat'); 
    این کار Exclude یا محروم کردن نام داره ، با این کار در صورتی که مطلبی در دسته ای مشخص شده باشه نمایش داده نمیشه ، خب ما عدد -7 رو بهش میدیم ، اینطوری دسته ای که ای دی اون 7 هست محروم میشه و در حلقه عادی وردپرس قرار نخواهد گرفت. یک خط هم کامنت شده توی این که باز هم مربوط میشه به پنل که باید تنظیم بشه روی قالب و بعد ازش استفاده کنیم.
    خب این آموزش هم به پایان رسید و شما با دو حلقه وردپرس آشنا شدید ، امیدوارم که لذت برده باشید.
    موفق باشید

    2 نفر از اعضا پست ROACH را پسندیده اند


    ویرایش توسط ROACH : 10-14-2014 در ساعت 09:28 PM
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 7
    آخرين نوشته: 07-10-2014, 01:21 PM
  2. طراحي قالب html
    توسط aaaaz در انجمن دیگر سیستم ها
    پاسخ: 5
    آخرين نوشته: 01-11-2014, 06:31 PM
  3. پاسخ: 5
    آخرين نوشته: 08-14-2013, 12:53 AM
  4. آموزش تبدیل استایل به کد Html
    توسط Mr.Darken در انجمن دیگر آموزش ها
    پاسخ: 6
    آخرين نوشته: 08-10-2013, 08:49 PM
  5. یک مرجع خوب برای Html و css میخوام (آموزشش)
    توسط Sm@rt در انجمن آموزش ها
    پاسخ: 14
    آخرين نوشته: 07-20-2013, 03:13 AM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی