تصميم مواقع | خامات تصميم | برمجيات | css |design | vectors

Posts tagged ‘محرر’

عدد الصفحات بدون اضافة – YourColor

yourcolor.net

YourColor.Net

yourcolor.net

السلام عليكم و رحمة الله و بركاته

اليوم راح نتكلم عن كيفية عمل عداد للصفحات بدون اضافة و هذا الدرس مقدم من الاكاديمية العربية

هذا هو الشرح :

الطلبات :

1 – برنامج FTP لرفع الملفات

2 – برنامج notepad++ محرر النصوص

الخطوات :

قم بالدخول علي ملف functions.php وضع هذا الكود بنهاية الملف

function pagination($pages = ”, $range = 4)
{
     $showitems = ($range * 2)+1;
     global $paged;
     if(empty($paged)) $paged = 1;
     if($pages == ”)
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }
     if(1 != $pages)
     {
         echo “<div class=”pagination”><span>Page “.$paged.” of “.$pages.”</span>”;
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo “<a href='”.get_pagenum_link(1).”‘>&laquo; First</a>”;
         if($paged > 1 && $showitems < $pages) echo “<a href='”.get_pagenum_link($paged – 1).”‘>&lsaquo; Previous</a>”;
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? “<span class=”current”>”.$i.”</span>”:”<a href='”.get_pagenum_link($i).”‘ class=”inactive”>”.$i.”</a>”;
             }
         }
         if ($paged < $pages && $showitems < $pages) echo “<a href=””.get_pagenum_link($paged + 1).””>Next &rsaquo;</a>”;
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo “<a href='”.get_pagenum_link($pages).”‘>Last &raquo;</a>”;
         echo “</div>n”;
     }
}

ثم قم بالدخول علي ملف style.css وضع هذا الكود بنهاية الملف

.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
.pagination a:hover{
color:#fff;
background: #3279BB;
}
.pagination .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}

و قم بوضع هذا الكود بهذه الملفات :

index.php
archive.php
search.php

لاظهار ارقام الصفحات فى الرئيسيه والارشيف وصفحة البحث

<?php if (function_exists(“pagination”)) {
    pagination($additional_loop->max_num_pages);
} ?>

و بعد الانتهاء من التعديل علي الملفات قم برفعها علي ملف الاستايل

و السلام عليكم و رحمة الله و بركاته

الاكاديمية العربية لفنون التصميم و الجرافيك

إضافات لمحرر النصوص في الووردبريس (تميز بكتابة مقالتك) – Yourcolor

 الووردبريس wp

yourcolor.net
yourcolor.net

yourcolor.netكثير منا يستخدم المحرر المرئي أو محرر الHTML لكن وكما تعرفون أن الخيارات المتاحة قليلة جداً وتكاد أن تصبح مملة!
الحمدلله تمكنت من الانتهاء من تطوير وتعريب بعض الاضافات الخاصة بالمحرر
بعد تنزيل الاضافات سيظهر شكل المحرر كالتالي

1.محرر النصوص المرئي.

yourcolor-net

2.محرر النصوص الHTML

yourcolor.net

سأريكم بعض الأمثلة

[learn_more caption=”صندوق”]هذا الصندوق ديناميكي[/learn_more]
[box]هذا صندوق متعدد الخيارات لكن سيتم تطبيق اختيار واحد، أترك الباقي لكم لتجربوها [/box]
[button link=”http://www.yourcolor.net&#8221; type=”icon” icon=”paper”]هذا زر[/button]

[tabs slidertype=”top tabs”][tabcontainer] [tabtext]الاكاديمية– كل شيء عن الووردبريس[/tabtext]

[tabtext]yourcolor.net[/tabtext] [/tabcontainer] [tabcontent] [tab]الاكاديمية العربية لفنون التصميم و الجرافيك,[/tab] [tab]اضافة لمحرر النصوص فى الوورد بريس[/tab] [/tabcontent] [/tabs]


الاكاديمية العربية لفنون التصميم و الجرافيك

مشكلة إختفاء أزرار المحرر المتطور – YourColor

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

تواجهنا الكثير من المشاكل في عالم التدوين، في هذه المقالة سنسلط الضوء على مشكلة “المحرر المتطور”

وهي إختفاء الأزرار بشكل مفاجيء..

لقد واجهتني هذه المشكلة في الاصدار السابق من الووردبريس، وسنتطرق الى خطوات حل المشكلة حالاً،

صورة توضيحية للمشكلة:

yourcolor.net

1. تأكد من أن المحرر المتطور غير معطل

كيفية تفعيل محرر النصوص المتطور؟

من لوحة تحكم الورردبريس، الأعضاء > تحرير العضو

تأكد من أن الخيار غير معطل

yourcolor.net

2. عطل جميع الاضافات

احدى الاسباب الشائعة في حصول مشاكل في المحرر المتطور هي الإضافات، وهو أحد الأسباب الذي سبب لي هذه المشكلة
قمت بتنزيل اضافة، وعند اضافتي لتدوينة، تفاجأت بأن محرر النصوص من دون أزرار، فعطلت جميع الاضافات وفعلت واحدة تلو الأخرى حتى ظهرت المشكلة مرة أخرى فعرفت أي الاضافة التي سببت المشكلة.

3.مسح الملفات المؤقتة

قم بمسح جميع الملفات المؤقتة CACHE واعمل تحديث بالضغط على CTRL + F5

4.إعادة رفع الملفات

اذا لم يجدي نفعاً أي من الخطوات السابقة، قم برفع ملفات الTinyMCE مرة أخرى المتكونة في wp-includes/js

5.أعد تنصيب الووردبريس

في حال بقاء المشكلة، أعد تنصيب الووردبريس ووفر الكثير من الوقت

الاكاديمية العربية لفنون التصميم و الجرافيك

الأفضل علي الإطلاق في عرض الأكواد ‘SyntaxHighlighter’ هام للمطورين – yourcolor

الأفضل علي الإطلاق في عرض الأكواد ‘SyntaxHighlighter’ هام للمطورين 

yourcolor.net

yourcolor.net
yourcolor.net
في البدايه و حرصا علي إضافة أي جديد أتيت لكم بهذه الإضافه الهامه جدا لقطاع كبير من المطورين أصحاب المواقع والمدونات التطويريه .
هذه الإضافه تعرض شروحات الأكواد بالتدوينات بشكل أكثر إحترافيه أفضل من الشكل العادي تعرضها وكأنها في محرر أكواد علي سبيل المثال Notbad2 وDev-PHP وغيرهم من البرامج الأخري لذلك أنصح بإقتناء هذه الإضافه الممتازه.
سكرين شوت من الإضافه:
لو لاحظت الأكواد مرتبه وكل تاج أو وسم له لون محدد وهذا كله يساعد علي فهم الكود وقراءته بطريقه سريعه.
نأتي للخطوات:
1- حمل إضافة SyntaxHighlighter
2- بعد رفع الإضافه علي المسار التالي wp-content > plugins
3- توجه إلي لوحة تحكم ووردبريس ثم إلي قسم الإضافات لتفعيلها من الأفضل ترك إعداداتها كما هي علي الوضع الإفتراضي بعد التفعيل ستواجه هذه المشكله إنظر للصوره التاليه:
لحل هذه المشكله قم بإضافة هذا الكود في ملف Style.css الخاص بموقعك علي المسار التالي (لوحة التحكم ->المظهر -> المحرر -> style.css) :

.syntaxhighlighter code {
display:inline !important;
}

وسيتم حل المشكله إن شاء الله وستعمل الإضافة بكل كفاءه,
تتسأل الأن كيف تدرج الأكواد في التدوينات بإستخدام هذه الإضافة, كل ما عليك هو إستخدام الكود التالي:

[sourcecode language='css']هنا يوضع الكود[/sourcecode] 

لاحظ أنه تم تحديد نوع لغة البرمج المستخدمه css في الكود وهذا ما ستفعله هو تغيير إسم اللغه التي تقوم بشرحها كـ Css أو Php أو Html أو اي لغه أخري فقط أضف إسم اللغه قائمه بأسماء لغات البرمجه وضع الكود المراد عرضه في المنطقه المحدده وستعمل معك الإضافه بكل تأكيد وبدون مشاكل

كيف تستخدم إضافة yourcolor – FeatureMe


كيف تستخدم إضافة FeatureMe


yourcolor.net

 yourcolor.net


yourcolor.net

سألني أحد القراء عن
إضافة FeatureMe تسمح لك هذه الإضافة بعرض “التدوينات المميّزة” أو “أهم المواضيع”
على شكل شاشة دينماكية متحركة. أنظر الصورة أعلاه أو أعلى الصفحة في هذا القالب
للمعاينة. بالطبع، هنا أنا أستخدمها في ضمن إطار خاص بالقالب ولكنك تستطيع
إستخدامها على حدة. سأشرح لك في هذه التدوينة كيف تقوم بذلك بالضبط


إضافة FeatureMe

هدف
الإضافة

عرض شاشة متحركة بالتدوينات المميّزة.

مثال حي

أنظر أعلى الصفحة في هذا القالب.

تعريب

لا تحناج. هذه إضافة بسيطة جداً.

طريقة العمل

1- حمّل الإضافة واستخرج محتواها

2- إرفع مجلد الإضافة إلى مجلد wp-content>plugins بإستخدام برنامج FTP (لمزيد من
التفاصيل راجع تدوينتي هذه)

3- إذهب إلى قسم الإضافات (Plugins) في لوحة التحكم وقم بتفعيلها (Activate)

4- إذهب إلى صفحة التدوين في محرر ووردبرس وأضف تدوينة

5- قم بتحديد إعدادات التدوينة كما يلي:

إذهب إلى قسم الخصائص الإضافية وقم بصنع خاصية إسمها thumbnail وقيمتها تساوي مسار
الصورة الخاصة بالتدوينة على موقعك.

أنقر على أو إختار مربع “This is a cool entry, feature it” في أسفل صفحة محرر
التدوينة.

6- لوضع الإضافة في مدونتك إستخدم الكود التالي (في ملف header.php مثلاً):


حيث
max_posts تساوي عدد التدوينات المميّزة التي تريد عرضها.


بالطبع، لتحديد شكل أو طريقة عرض التدوينات المميّزة عليك
أن تصنع كلاس خاص بها في ملف الستايل وأن تضع هذا الكود
داخله.

هذا كل
شيئ. بالتوفيق، وما عليكم إلأ السؤال إن إحتجتم أي مساعدة.


yourcolor.net

yourcolor-featureme

للتحميل

معرض الوسوم