البحث في الموقع
المحتوى عن 'wp'.
تم العثور على 2 نتائج
-
هذا هو الدرس الأخير من هذه السلسلة، ففي الدرس الأول قمنا بتصميم الواجهة باستخدام برنامج الفوتوشوب، وفي الدرس الثاني قمنا بتحويل التصميم إلى نموذج HTML5، أمّا في هذا الدرس فسوف نقوم ببناء قالب ووردبريس كامل وجاهز للاستخدام. إذا كان هذا هو أول درس تتابعه من هذه السلسلة فدعني أخبرك قليلًا عنها. أردنا في هذه السلسلة بناء قالب ووردبريس كامل، وكما ذكرت سابقًا فهذا هو الدرس الثالث والأخير من هذه السلسلة. وقلنا بأنّ اسم القالب سيكون "Typo" وبأنه سيعتمد بشكل كلي على فن Typography من دون استعمال أي صور حتى يكون التركيز بالكامل على المحتوى. اضغط هنا لمعاينة القالب بشكله النهائي. ملفات قالب الووردبريس بما أنّ القالب بسيط فسوف نقوم بإنشاء القالب باستخدام ملفات القوالب المعتادة والمألوفة، كما أنّه سيتم تقسيم نموذج HTML5 الذي قمنا بإنشائه سابقًا على ملفات القالب من أجل إنشاء الصفحات المختلفة للقالب. سنقوم أيضًا بنسخ جميع الصور وملفات CSS إلى مجلد القالب. ملف Style.css الخاص بالقالب Theme Name: Typo Theme URI: http://blog.spoongraphics.co.uk/ Description: A premium theme by Chris Spooner of Blog.SpoonGraphics. Version: 1.0 Author: Chris Spooner Author URI: http://blog.spoongraphics.co.uk/ body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } قمنا في بداية الملف بإضافة مجموعة من التفاصيل التي تخص القالب حتى يتعرف عليه الووردبريس، كما أننا قمنا بنسخ بعض التنسيقات الموجودة في نموذج HTML5 الذي أنشأناه سابقًا. ملف Header.php <!doctype html> <html> <head> <meta charset="UTF-8"> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" /> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic" rel="stylesheet" /> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lt IE 9]> <link href="<?php bloginfo('template_url); ?>/css/ie.css" rel="stylesheet" /> <![endif]--> <!--WP generated header--> <?php wp_head(); ?> <!--End WP generated header--> </head> <body> <div id="container"> <header> <h1><a href="<?php echo get_option('home'); ?>" title="Return to the hompage">Typo</a></h1> <nav role="navigation"> <ul> <li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_list_pages('title_li=' ); ?> </ul> </nav> </header> قمنا بنسخ الجزء الأول من الشيفرة البرمجية الموجودة في ملف index.html الخاص بالنموذج إلى ملف header.php. فقد قمنا بنسخ كل شيء ابتداءً من Doctype وانتهاءً بمحتويات الوسم <head> ووضعناه في ملف header.php، بعد ذلك أضفنا بعض الوسوم الخاصة بقوالب ووردبريس، وكمثال على ذلك فقد قمنا بإضافة <? ;()php wp_title?> لإظهار عنوان التدوينة أو الصفحة و<? ;('php wp_list_pages('title_li?> لعرض قائمة بجميع الصفحات، فالقيمة title_li استخدمت لإزالة الإعداد الإفتراضي الذي يقوم بإظهار العنوان "Pages" أعلى القائمة. ملف Index.php <?php get_header(); ?> <div id="content" role="main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article <?php post_class(); ?>> <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <? php the_content(''); ?> <ul class="postinfo"> <li><?php the_time('jS F Y'); ?></li> <li>Posted in <?php the_cetegory(', '); ?></li> <li><a href="<? php the_permalink(); ?>">Continue Reading »</a></li> </ul> </article> <?php endwhile; ?> <nav id="pagination"> <ul> <li class="older"><?php next_posts_link('Older posts'); ?></li> <li class="newer"><?php previous_posts_link('Newer posts'); ?></li> </ul> </nav> <? php else : ?> <article class="nothing"> <h2>Nothing Found</h2> <p>Sorry, but you are looking for something that isn't here</p> <p><a href="<?php echo get_option('home'); ?>">Return to the homepage</a></p> </article> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> قمنا بعد ذلك بنسخ الشيفرات البرمجية من عند نهاية ما هو موجود في ملف header.php وحتى بداية القائمة الجانبية، بعدها أضفنا حلقة ووردبريس (WordPress loop) لنتفحص فيما إذا كان هناك محتوى/تدوينات أم لا. وإذا كنت تذكر ففي ملف HTML الثابت الذي أنشأناه سابقًا قمنا بوضع 3 تدوينات بنصوص عشوائية، ولكننا الآن لن نحتاج لها لأن الووردبريس سوف يعرض التدوينات باستخدام الكود الموجود بين while وendwhile، ففي داخل هذه الحلقة تبقى بنية HTML موجودة ولكن العناصر التي تحتاج أن تكون متغيرة/ديناميكية (dynamic) استُبدِلت بوسوم PHP مناسبة، فعلى سبيل المثال فإنّ الكود <? ;()php the_permalink?> سوف يعرض عنوان URL الخاص بالتدوينة داخل وسم <a> وأمّا الكود <? ()php the_category?> سوف يقوم بعرض فئة التدوينة. وبالنسبة للمحتوى العشوائي فإنه يمكن استبداله بوسم واحد وهو <? ;()php the_content?> بحيث سيقوم الووردبريس بإدخال كل المحتوى المحفوظ في قاعدة البيانات من محرر النصوص بدل ذلك الوسم. أمّا في أعلى وأسفل هذا الملف فقد قمنا باستدعاء ملفات القالب للحصول على صفحة كاملة، فالوسم <? ;()php get_header?> يقوم بمناداة وإدخال ملف header.php، بينما يقوم الوسم <? ;()php get_sidebar?> بمناداة وإدخال ملف sidebar.php وهكذا بالنسبة لجميع الملفات. ملف Sidebar.php <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p><?php echo get_option('omr_about_excerpt');?> <a href="<?php echo get_option('omr_about_link');?>">Find out more »</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <?php wp_list_categories('show_count=0&title_li=&hide_empty=0&exclude=1'); ?> </ul> </section> <section id="social"> <h3>Social</h3> <ul> <?php if( !get_option('omr_social-one') ) { ?> <?php } else { ?> <li><a href="<?php echo get_option('omr_social-one_url');?>"><?php echo get_option('omr_social-one');?></a></li> <?php } ?> <!-- more custom tags for theme settings page --> <?php if( !get_option('omr_social-six') ) { ?> <?php } else { ?> <li><a href="<?php echo get_option('omr_social-six_url');?>"><?php echo get_option('omr_social-six');?></a></li> <?php } ?> </ul> </section> <section id="latest"> <h3>Latest Posts</h3> <ul> <?php query_posts('showposts=6'); if ( have_posts() ) : whitle ( have_posts() ) : the_post();?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; else: ?> <li>No posts found</li> <?php endif;?> <?php wp_reset_query();?> </ul> </section> <section id="search" role="search"> <h3>Search</h3> <form action="<?php bloginfo('url'); ?>/" method="get"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for…" name="s" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> الجزء التالي هو القائمة الجانبية بحيث تكون عناصره بين وسمي <aside>. نفس القاعدة تنطبق على أي محتوى عشوائي بحيث يتم استبداله بوسم PHP بحيث يتم ادخال المحتوى بشكل ديناميكي. ومن الأمثلة على ذلك <? ;()php wp_list_categories?> مع مجموعة من المتغيرات لتخصيص مخطّط الصفحة (layout). في هذا القالب هناك الكثير من الوسوم المخصصة التي تسمح للمستخدم بتخصيص القالب كما يريد باستخدام صفحة إعدادات خاصة، فجميع الوسوم التي تبدأ بـ _omr تقوم باستدعاء إعدادات مخصصة مثل جزء About وروابط الشبكات الاجتماعية. ملف Footer.php <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoonghraphics"><a href="http://blog.spoongraphics.co.uk">Theme by SpoonGrahpics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <!--WP generated footer--> <?php wp_footer(); ?> <!--END WP generated footer--> </body> </html> ملفات Archive.php وSearch.php <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoonghraphics"><a href="http://blog.spoongraphics.co.uk">Theme by SpoonGrahpics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <!--WP generated footer--> <?php wp_footer(); ?> <!--END WP generated footer--> </body> </html> البنية الرئيسية للصفحة يتم إنشاؤها باستخدام header.php ،index.php ،sidebar.php وfooter.php، ولكن index.php تُستخدم فقط في الصفحة الرئيسية (إذا كانت هناك تدوينات ليتم عرضها على الصفحة الرئيسية). هناك بدائل لـ index.php يتم استخدامها لخصائص متعددة في المدونة مثل تصفح التدوينات بناءً على ترشيح (filter) معين (كالترشيح حسب الفئة أو التاريخ أو حتى حسب الكاتب)، أو عند تصفح التدوينات بناءً على نتيجة بحث معينة. هنا يأتي دور archive.php وsearch.php، فمحتوى هذين الملفين يشبه إلى حد كبير محتوى ملف index.php باستثناء أنّ هذين الملفين يحتويان على عناوين إضافية لوصف المحتوى المعروض على الصفحة. ملفات Page.php وSingle.php <?php get_header(); ?> <div id="content" role=''main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <artic1e <?php post_c1ass(); ?>> <h2 c1ass="post-title"><?php the_title(); ?></h2> <?php the_content("); ?> </article> <?php endwhile; ?> <?php endif; ?>> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php get_header(); ?> <div id="content" role=''main"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <artic1e <?php post_c1ass(); ?>> <h2 c1ass="post-title"><?php the_title(); ?></h2> <?php the_content("); ?> </article> <?php endwhile; ?> <?php endif; ?>> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> عندما يتم تصفّح تدوينة أو صفحة واحدة فإنّ ملفات index.php ،archive.php أو search.php يتم استبدالها بملفات page.php أو single.php. هذه الملفات أيضًا متشابهة ولكن التخطيط الخاص بها عادةً لا يحتوي على بعض الخصائص مثل رابط العنوان (يصبح العنوان نص عادي وليس رابط)، معلومات التدوينة، اقرأ المزيد وروابط ترقيم الصفحات (pagination) لانّ هذه الأمور لم تعد مطلوبة ومهمة عند تصفح المحتوى أو التدوينات بشكل فردي. كما أنّ ملف single.php يحتوي على قسم التعليقات وقد تمت إضافته باستخدام وسم <? ;()php commentstemplate?>. ملف Comments.php <?php // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die (‘Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p c1ass="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <div id="comments"> <h3><?php comments_number('No Comments‘, '1 Comment’, '% Comments’ );?></h3> <?php if ( have_comments() ) : ?> <ol class="commentlist"> <?php wp_list_comments('avatar_size=&type=comment'); ?> <div class="pagination"> <p class="prev"><?php previous_comments_link(‘Older comments‘) ?></p> <p class="next"><?php next_comments_link(‘Newer comments‘) ?></p> </diV> <?php endif; ?> <?php if ( comments_open() ) : ?> <div id="respond"> <h3>Leave a response</h3> <form action="<?php echo get_option('siteurl'); ?> /wp-comments-post.php" method="post" id="commentform"> <fieldset> <label for="author">Name:</label> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" /> <label for="email">Email:</label> <input type=“text" name="email" id="email" value="<?php echo $comment_author_email; ?>" /> <label for="url">Website:</label> <input type="text" name="url" id="url" value="<?php echo scomment_author_url; ?>" /> <label for="comment">Comment:</label> <textarea name="comment" id="comment” rows="" cols=""></textarea> <input type="submit" class="commentsubmit" value="Submit" /> <?php comment_id_fields(); ?> <?php do_action('comment_form', $post->ID); ?> </fieldset> </form> <p class="cancel"><?php cancel_comment_reply_link('Cancel Reply'); ?></p> </div> <?php else : ?> <h3>Comments are now closed.</h3> <?php endif; ?> </div><!--Comments--> يمكنك القول بأنّ ملف comments.php هو أحد أكثر الملفات التي يمكن إعادة استخدامها في كل القوالب التي تصنعها لأنّ هذا الملف ومحتوياته لا يتغير كثيرًا. جميع التعليقات يتم إنشاؤها وإظهارها في الصفحة باستخدام وسم واحد فقط وهو <? ;()php wplistcomments?> ثم تحتاج إلى بعض تنسيقات CSS لتنسيق المحتوى، وفي نهاية الملف يوجد نموذج كتابة التعليقات. خاتمة يمكنك بعد إنشاء جميع ملفات القاب أن تقوم برفعها واختبارها على مدونة ووردبريس. حاول بعد ذلك تعديل بعض الإعدادات وإضافة بعض المحتوى (كتابة تدوينةأو تعليق مثلًا) حتى تتأكد أنّ كل شيء يعمل كما هو مطلوب. كما رأيت فعملية بناء قالب ووردبريس تتطلب نسخ ولصق العديد من الأكواد، وإذا كنت تبحث عن أي وسم لاستخدامه يمكنك اللجوء إلى موقع WordPress Codex فهو يحتوي على جميع الوسوم التي يمكنك استخدامها. يمكنك معاينة القالب من هنا. ترجمة -وبتصرف- للمقال: Create a Typography Based WordPress Blog Theme لصاحبه: Iggy. -
تُعتبر لوحة تسجيل الدخول في ووردبريس من أقل المواضيع التي يتم التحدث فيها أو التلاعب بتصاميمها على عكس التصاميم الخاصة بالقوالب، ولكنه من الجيد لك أن تعرف كيف تُنشئ واحدة حتى يبدو موقعك أو موقع عميلك متميّزًا وله رونقه الخاص. تابع معنا هذا الدرس لتعرف كيفية إنشاء لوحة تسجيل دخول خاصة بدون استعمال الإضافات. لماذا يجب عليك تعلم ذلك؟كل المواقع التي تعمل على منصة ووردبريس تملك نفس تصميم لوحة الدخول وهو التصميم الرئيسي الخاص بالووردبريس، ولكن بعض العملاء يريدون أن يتميزوا بكل صغيرة وكبيرة في موقعهم ومن ضمنها لوحة الدخول. سأريك الآن كيف تقوم بذلك فالأمر سهل وغير معقد ويمكنك أن تكتب أكواد CSS وjQuery خاصة بك ولن تحتاج إلى أي إضافات. لم لا تستخدم إضافة جاهزة وحسب؟هناك إضافة جيدة اسمها "BM Custom Login" ولكن حدثت عليها الكثير من التعديلات والاختلافات منذ إصدارها الأول، وأصبحت أحس أن الإصدار الحالي ليس بتلك الجودة. وشيء آخر، وهو أنه يجب عليك أن تقلل من الإضافات في موقعك على قدر الإمكان إن أردت لموقعك أن يكون سريعًا. على كل حال وكما ذكرنا سابقًا فإننا لن نستخدم أي إضافات في هذا الدرس. هيكلة القالب الجميل في هذه الطريقة هو أنك تستطيع أن تحفظ كل الملفات المهمة داخل القالب نفسه على عكس الإضافات التي تُبقي ملفاتها بداخل مجلد الإضافة نفسه، وبذلك نُبقي كل شيء منظم ومن السهل الرجوع إليه في أي وقت. تحديث/تعديل ملف functions.phpfunction custom_login() { $files = '<link rel="stylesheet" href="'.get_bloginfo('template_directory').'/css/login.css" /> <script src="http://use.typekit.com/pgf3epu.js"></script> <script>try{Typekit.load();}catch(e){}</script> <script src="'.get_bloginfo('template_directory').'/js/jquery.min.js"></script> <script src="'.get_bloginfo('template_directory').'/js/login.js"></script>'; echo $files; } addaction('loginhead', 'custom_login');أول خطوة ستكون كتابة دالة داخل ملف functions.php وتخزين كل الملفات الضرورية داخل مُتغيّر ثمَّ عمل echo له. يمكننا مناداة الملفات الموجودة داخل القالب باستعمال ('get_bloginfo('template_directory وربط الملف مباشرة. لقد قمت أيضًا بإضافة ملف jQuery مُصغّر (minified) وtypekit أيضًا. function customloginurl() { echo bloginfo('url'); } addfilter('loginheaderurl', 'customloginurl'); function customlogintitle() { echo get_option('blogname'); } addfilter('loginheadertitle', 'customlogintitle');قمت أيضًا بإضافة دالّتين؛ واحدة لتغيير رابط الشّعار حتى يظهر الشّعار الخاص بالموقع بدلًا من شعار موقع Wordpress.org، والدالة الثانية استخدمتها لتغيير عنوان لوحة تسجيل الدخول. هذا كان ما يخص أكواد PHP فلن نحتاج إلى أي أكواد PHP إضافية بعد الآن. تغيير تنسيقات CSSهنا يبدأ التحدي. سوف تحتاج الآن إلى الإطلاع على عناصر DOM لمعرفة العناصر التي تستطيع تعديلها وسوف تحتاج أيضًا إلى إزاحة تنسيقات CSS الموجودة في الصفحة واستبدالها بتنسيقات أخرى، وحتى تفعل ذلك سوف تحتاج إلى استخدام Developer Tools كتلك الموجودة في متصفح Google Chrome أو يمكنك استخدام إضافة Firebug المشهورة. ما أحبّ إضافته في بداية الملف هو المحدد العام * لتحديد واستهداف كافة العناصر ومن ثم أضيف لها خاصية transition وخاصية webkit-font-smoothing: antialiasing- حتى نحصل على خط أفضل في متصفحات webkit. ما أفضله أيضًا هو التعديل على محدد الفئة الزائفة (pseudo-class) المسمى focus: للتخلص من الحدود الخارجية (outlines). * { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-font-smoothing: antialiased; } :focus { outline: 0!important; }يمكننا باستعمال Developer Tools معرفة العناصر الموجودة ومعرفة تنسيقات CSS المستخدمة لنتمكن من تغييرها. فعلى سبيل المثال، يمكننا تغيير الشعار الموجود أعلى لوحة تسجيل الدخول إلى شعار الموقع نفسه: body.login h1 a { background: url('../images/logo.png') center center no-repeat transparent; background-size: 188px 189px; width: 188px; height: 189px; margin: 0 auto 30px; opacity: 0.7; padding: 0; } body.login h1 a:hover {opacity: 1;}كما ترى في الأعلى فقد قمت بتحديد العنصر body.login ثم h1 الموجود بداخله انتهاءً بالوسم a، وقمت بعد ذلك باستخدام الخاصية background لوضع صورة الشعار الموجودة في مجلد images واستعمال بعض تنسيقات CSS بسيطة. لاحظ أيضًا أنني استعملت خاصية background-size كما هو في Wordpress 3.4 وخاصية opacity لتقليل شفافية الشّعار وإعادته إلى شفافيته كاملة عند وضع مؤشر الفأرة فوقه (hover). نريد أيضًا إخفاء عنصر backtoblog# لأننا لن نحتاجه فالشّعار سوف يفي بالغرض ليأخدنا إلى الصفحة الرئيسية للمدونة. يمكنني استعمال الكثير من تنسيقات CSS لتغيير جميع العناصر حتى تتوافق مع التصميم، وإذا أردت استبدال تنسيقات مكان أخرى فسوف أستعمل ids الموجودة في الصفحة وimportant! إن اضطررت لذلك. form#loginform p.forgetmenot label { position: relative; background-image: url('../images/checkbox.png'); background-position: 0 0; background-repeat: no-repeat; padding: 2px 0 0 24px; height: 18px; display: inline-block; -webkit-transition: none; -moz-transition: none; -ms-transition: none; transition: none; } form#loginform p.forgetmenot label input[type="checkbox"] { position: absolute; left: 0; opacity: 0; width: 20px; height: 20px; display: block; cursor: pointer; }سنقوم الآن بتغيير التصميم الخاص بمربع الاختيار (checkbox) وذلك باستعمال background-image على الـتسمية (label) وإضافة بعض padding إلى اليسار وسوف نقوم بإخفاء مربع الاختيار نفسه. ولسوء الحظ، فإنه سيكون من الصعب تغيير الصورة عند النقر عليها وذلك لأن مربع الاختيار موجود داخل وسم <label>، وبالتالي سوف نضطر إلى استعمال jQuery. إضافة أكواد jQueryيمكننا استعمال jQuery لإضافة بعض التنسيقات أو attributes أو حتى تغيير أجزاء بعض العناصر، كما أنني أريد أن أضيف placeholders إلى حقول الإدخال وكذلك جعل مربع الاختيار يعمل مع بعض الصور الخاصة وكل ذلك سوف يتم داخل ملف login.js الموجود في مجلد "js" الخاص بالقالب. $('#loginform input[type="text"]').attr('placeholder', 'Username'); $('#loginform input[type="password"]').attr('placeholder', 'Password'); $('#loginform label[for="user_login"]').contents().filter(function() { return this.nodeType === 3; }).remove(); $('#loginform label[for="user_pass"]').contents().filter(function() { return this.nodeType === 3; }).remove();يمكننا باستعمال jQuery إضافة placeholder إلى حقول الإدخال، ولكن ذلك لن يكون سهلًا بسبب وجود الحقول داخل وسوم <label> مما سيجعل عملية إزالة النص الخاص بالـتسمية أمرًا ليس باليسير. سوف نقوم باستعمال ()contents. و ()filter. لإزالة النصوص الخاصة بالـتسمية ليبقى لدينا placeholders فقط. $('input[type="checkbox"]').click(function() { $(this+':checked').parent('label').css("background-position","0px -20px"); $(this).not(':checked').parent('label').css("background-position","0px 0px"); });وكما قلنا سابقًا، فوجود مربع الاختيار داخل وسم <label> سيجعل عملية تطويع مربع الاختيار ليعمل كما نريد أمرًا صعبًا. فالطريقة التي من المفترض أن يعمل بها هو أنّه عندما يتم الضغط على التسمية (label) فإنّ مربع الاختيار سوف يتم اختياره (يصبح checked) وبالتالي تتغير الصورة التي أضفناها لتدل على أنه تم النقر على المربع، ولذلك قمنا باستعمال jQuery لنتفقد فيما إذا كان مربع الاختيار في حالة checked أو لا، فإذا كان في حالة checked فإن المحدد checked: سوف يعمل على تغيير موضعة الصورة (باستعمال background-position) واذا لم يكن كذلك فسوف يعود كل شيء إلى طبيعته. خاتمة كما رأيت، فقد قمنا بإنشاء لوحة تسجيل دخول بكل سهولة وذلك فقط باستعمال Wordpress functions ،CSS وjQuery ومن دون الحاجة إلى أي إضافات. يمكنك الإطلاع على النتيجة النهائية من هنا. ترجمة -وبتصرف- للمقال: Create a Custom WordPress Login Without Plugins لصاحبه: Iggy.
