طريقة تعطيل إضافات ووردبريس عن طريق السي بانل CPanel

إن كنت لا تستطيع تسجيل الدخول إلى لوحة تحكم ووردبريس (WordPress Admin Dashboard) بسبب مشكلة في أى إضافة (Plugin) مثبتة. لذا لابد من تعطيل وإيقاف هذه الإضافة لكي تستطيع الدخول إلى لوحة تحكم ووردبريس. وهذا ما سنقوم به اليوم عن طريق تعطيل إضافات ووردبريس يدوياً عن طريق مدير الملفات الموجود في السي بانل (CPanel File Manager).

فيديو شرح لخطوات تعطيل اضافات ووردبريس عن طريق CPanel

إن كنت تريد متابعة الشرح بالكتابة والصور، فأكمل الشرح.

تسجيل الدخول الى السي بانل (CPanel)

افتح متصفح الإنترنت، واذهب إلي اسم موقعك متبوعاً بكلمة cpanel مثل https://learns7.com/cpanel كما ترى في الصورة التالية.

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

أكتب اسم المستخدم وكلمة المرور الخاصين باستضافة موقعك. ثم اضغط تسجيل دخول (Log In). ستفتح لوحة تحكم السي بانل كما ترى في الصورة التالية.

اضغط على File Manager ثم اضغط مرتين على public_html إن كنت قد ثبتت الووردبريس في مكانه الإفتراضي، أما إن كنت ثبته في مجلد آخر فاختر المجلد الذي ثبته فيه.

اضغط مرتين على مجلد wp-content لكي يفتح، ثم اضغط مرتين على مجلد plugins ليفتح أيضاً. والآن ترى كل الإضافات التي قمت بتثبيتها على ووردبريس موقعك.

لتعطيل الإضافة، قم بتغيير اسم المجلد الخاص بالإضافة. مثال: تغيير اسم الاضافة akismet إلى akismet-bak وبذلك هذه الإضافة لن تعمل .

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

والآن يمكنك تسجيل الدخول إلى موقعك بدون أى مشكلة. إن نسيت رابط تسجيل الدخول إلى موقعك، اكتب موقعك ثم اتبعه بـ wp-login.php مثال https://learns7.com/wp-login.php سيفتح الموقع بدون أى مشكلة.

إن واجهتك أى مشكلة فى الووردبريس أو إضافات ووردبرس أكتبها لنا في تعليق.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

كود برمجة تطبيق أندرويد لتحويل الكلام إلى نص مكتوب بلغة جافا

نظام أندرويد يوفر لنا ميزة تحويل المحادثات إلى نص مكتوب من خلال Android Speech API. استخدمنا من قبل هذه الميزة في تحويل الكلام المكتوب إلى صوت منطوق في شرح سابق. واليوم نقوم بتحويل الصوت إلى كلام مكتوب. يُمكنك استخدام هذه الميزة لإضافة أوامر صوتية لتطبيق الأندرويد أو أن تقوم بإضافة إمكانية ملء البيانات عن طريق الصوت بدلاً من الكتابة.

صممت تطبيق بسيط يحتوي على زر واحد و textview واحدة كما ترى في الصورة التالية.

خطوات انشاء تطبيق أندرويد لتحويل الصوت إلى كلمات مكتوبة

١. عدّل ملف strings.xml الموجودة في هذا المسار res/values ليصبح مثل هذا الكود

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Speech To Text</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="speech_prompt">Say something&#8230;</string>
    <string name="speech_not_supported">Sorry! Your device doesn\'t support speech input</string>
    <string name="tap_on_mic">Tap on mic to speak</string>
</resources>

٢. عدّل ملف colors.xml الموجود في هذا المسار res/values إن لم تجد هذا الملف قم بإنشاؤه.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="bg_gradient_start">#31244e</color>
    <color name="bg_gradient_end">#6b394c</color>
</resources>

٣. عدّل تصميم الصفحة الرئيسية من التطبيق وهى activity_main.xml للكود التالي:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_gradient"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/txtSpeechInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp"
        android:textColor="@color/white"
        android:textSize="26dp"
        android:textStyle="normal" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:gravity="center"
        android:orientation="vertical" >
 
        <ImageButton
            android:id="@+id/btnSpeak"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@drawable/ico_mic" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="@string/tap_on_mic"
            android:textColor="@color/white"
            android:textSize="15dp"
            android:textStyle="normal" />
    </LinearLayout>
 
</RelativeLayout>

٤. افتح ملف الكود MainActivity.java وقم بالتعديلات كما تجد في الشرح التالي.

أولاً: بدء RecognizerIntent لأخذ الصوت من المستخدم ب ACTION_RECOGNIZE_SPEECH وهي ببساطة تأخذ مدخلات المستخدم الصوتية وترسلها للـ main activity

ثانياً: استقبال النص داخل التطبيق. بعد الإنتهاء من الكلام، لابد أن تستقبل الرد داخل onActivityResult وتقوم بالعمليات التي تريدها. لفهم أعمق أقرأ الكود الكامل التالي.

package com.learns7.stt;
 
import java.util.ArrayList;
import java.util.Locale;
 
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.os.Bundle;
import android.speech.RecognizerIntent;
import android.view.Menu;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;
 
public class MainActivity extends Activity {
 
    private TextView txtSpeechInput;
    private ImageButton btnSpeak;
    private final int REQ_CODE_SPEECH_INPUT = 100;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        txtSpeechInput = (TextView) findViewById(R.id.txtSpeechInput);
        btnSpeak = (ImageButton) findViewById(R.id.btnSpeak);
 
        // hide the action bar
        getActionBar().hide();
 
        btnSpeak.setOnClickListener(new View.OnClickListener() {
 
            @Override
            public void onClick(View v) {
                promptSpeechInput();
            }
        });
 
    }
 
    /**
     * Showing google speech input dialog
     * */
    private void promptSpeechInput() {
        Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
        intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,
                RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
        intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault());
        intent.putExtra(RecognizerIntent.EXTRA_PROMPT,
                getString(R.string.speech_prompt));
        try {
            startActivityForResult(intent, REQ_CODE_SPEECH_INPUT);
        } catch (ActivityNotFoundException a) {
            Toast.makeText(getApplicationContext(),
                    getString(R.string.speech_not_supported),
                    Toast.LENGTH_SHORT).show();
        }
    }
 
    /**
     * Receiving speech input
     * */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
 
        switch (requestCode) {
        case REQ_CODE_SPEECH_INPUT: {
            if (resultCode == RESULT_OK && null != data) {
 
                ArrayList<String> result = data
                        .getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                txtSpeechInput.setText(result.get(0));
            }
            break;
        }
 
        }
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
}

لابد من تشغيل هذا التطبيق على موبايل أندرويد حقيقي وليس محاكي أندرويد. لأن هذا الكود لا يعمل على المحاكي. ولابد أن يكون الموبايل متصل بالإنترنت.

كيف نستخدم تحويل الكلام إلى نص مكتوب بدون إنترنت ؟

ليست كل الموبايلات لديها إمكانية تحويل الكلام إلى نص مكتوب بدون إنترنت.

خطوات تنزيل ملفات تحويل الأصوات إلى كلام مكتوب لكي تعمل بدون إنترنت:

1. في موبايلك، اذهب إلى الإعدادات (settings) ثم اللغة والإدخال (Language and Input) ثم اختر أيقونة برنامج Google voice input
2. تحت تبويب الكل (all) اختر اللغات التي تريد تحميلها
3. بمجرد نزول ملف اللغة على جهازك، ستجد اللغة ظهرت في تبويب installed وبذلك يمكنك استخدام إمكانية تحويل الكلام إلى نص مكتوب بهذه اللغة.

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

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

كود برمجة تطبيق أندرويد لتحويل النص إلى صوت بلغة جافا

أندرويد تعطينا إمكانية تحويل الكلام المكتوب إلى كلام منطوق. هذه التقنية لتحويل النص إلى صوت تدعم الكثير من اللغات أهمها اللغة الإنجليزية.

يوفر لنا نظام أندرويد كلاس TextToSpeech بتحويل النص إلى حديث (صوت). لإستخدام هذا الكلاس، علينا أولاً أن نعرف أوبجكت منه (instantiate object) من هذا الكلاس. كما ترى في الكود التالى.

private EditText write;
ttsobj = new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener(){
@override
public void onInit(int status){
}
});

في كود انتظار التعليمات (Listener)، لابد أن نحدد خصائص أوبجكت TextToSpeech مثل اللغة و حدّة الصوت .. وهكذا. يمكن تحديد اللغة عن طريق setLanguage() وطريقة كتابة هذه الفانكشن كما يلي:

ttsobj.setLanguage(Locale.UK);

الميثود setLanguage تأخذ باراميتار واحد وهو اللغة مثل US أو CANADA_FRENCH أو GERMANY أو ITALY أو JAPAN أو CHINA وهكذا.

بعد تحديد اللغة، يمكنك استدعاء ميثود speak من الكلاس لتقوم بنطق الكلمات باللغة المحددة مسبقاً. طريقة كتابة كود speak يكون كالتالي:

ttsobj.speak(toSpeak, TextToSpeech.QUEUE_FLUSH, null);

هناك الكثير من المثيودس (method) والدوال الأخرى التي يمكنك استخدامها من كلاس TextToSpeech وهذه الدوال هى:

addSpeech(String text, String filename)	هذه الدالة تربط بين النص المكتوب، وملف الصوتي للنص.
getLanguage()	هذه الدالة تعطينا لغة النص.
isSpeaking()	هذه الدالة تخبرنا إن كان المحرك الصوتي مشغول بنطق الكلام حالياً أم لا.
setPitch(float pitch)	هذه الدالة خاصة بإختيار حدة الصوت.
setSpeechRate(float speechRate)	هذه الدالة تحدد سرعة النطق.
shutdown()	هذه الدالة تزيل مصادر الجهاز التي يستخدمها محرك النطق TextToSpeech engine مثل الرامات والبروسيسور.
stop()	هذه الدالة مسؤولة عن إيقاف صوت نطق الكلام.

مثال على تحويل النص إلى كلام منطوق

الكود التالي هو مثال لتطبيق أندرويد يقوم بقراءة الكلام الذي تكتبه له في شكل حروف إلى أصوات الكلمات المنطوقة. لكي تجرب هذه الكود عليك ان تكتب كود البرنامج وتشغل تطبيق الأندرويد الذي أنشأته على تطبيق أندرويد حقيقي وليس محاكي.

خطوات إنشاء تطبيق أندرويد لنطق الكلام

1. قم بإنشاء مشروع جديد على برنامج أندرويد ستوديو (Android Studio) واختر مسار حزمة البرنامج com.learns7.tts مثلاً
2. قم بالتعديل على ملف src/MainActivity.java وأضف كود تشغيل كلاس النطق الصوتي TextToSpeech كما في الكود التالي.
3. وصّل موبايلك الأندرويد بجهاز الكمبيوتر، ثم شغّل (run) التطبيق على موبايلك المتصلك بالجهاز. وتأكد من أن التطبيق يعمل بشكل سليم.

كود src/MainActivity.java لتحويل الكلام المكتوب إلى صوت منطوق

package com.learns7.tts;
import android.app.Activity;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import java.util.Locale;
import android.widget.Toast;
public class MainActivity extends Activity {
   TextToSpeech t1;
   EditText ed1;
   Button b1;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      ed1=(EditText)findViewById(R.id.editText);
      b1=(Button)findViewById(R.id.button);
      t1=new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener() {
         @Override
         public void onInit(int status) {
            if(status != TextToSpeech.ERROR) {
               t1.setLanguage(Locale.UK);
            }
         }
      });
      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            String toSpeak = ed1.getText().toString();
            Toast.makeText(getApplicationContext(), toSpeak,Toast.LENGTH_SHORT).show();
            t1.speak(toSpeak, TextToSpeech.QUEUE_FLUSH, null);
         }
      });
   }
   public void onPause(){
      if(t1 !=null){
         t1.stop();
         t1.shutdown();
      }
      super.onPause();
   }
}

وهذا هو كود xml المكتوب في ملف activity_main.xml الخاص بتصميم شكل التطبيق

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
   android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:transitionGroup="true">
   
   <TextView android:text="Text to Speech" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
            
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"
      android:theme="@style/Base.TextAppearance.AppCompat" />
      
   <EditText
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/editText"
      android:layout_below="@+id/imageView"
      android:layout_marginTop="46dp"
      android:hint="Enter Text"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:textColor="#ff7aff10"
      android:textColorHint="#ffff23d1" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Text to Speech"
      android:id="@+id/button"
      android:layout_below="@+id/editText"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="46dp" />
</RelativeLayout>

وهذا هو ملف Strings.xml الخاص بحفظ نصوص أجزاء التصميم

<resources>
   <string name="app_name">TTS</string>
</resources>
كود ملف مشروع تطبيق الأندرويد AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.learns7.tts" >
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
   
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" >
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
   </application>
</manifest>

شغّل التطبيق على موبايلك المتصل بجهاز الكمبيوتر. وعندما يعمل التطبيق على الموبايل، أكتب كلمة Hello world مثلاً. ثم اضغط على زر Text To Speech ستجد صوت يخرج من موبايلك وينطق جملة Hello world أو أى جملة أخرى كتبتها في صندوق النص.

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

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

شرح تصميم قالب بلوجر – الجزء الرابع

تصميم قالب بلوجر سهل مثل كتابة صفحات HTML عادية ولكن الفرق هو أن بلوجر توفر لنا طريقة لإنشاء صفحات ديناميكية عن طريق ترجمة القالب (parsing) وإضافة الداتا المستخدمة في كتابة كود القالب.

تعلمنا في الجزء الأول والثاني والثالث كل ما يخص عناصر تصميم بلوجر (Blogger Elements) والمعلومات الخاصة بطريقة استخدامهم. ولكن الآن، في الجزء الرابع، نتكلم عن طريقة استخدام css لتنسيق ثيم بلوجر. واستخدام المتغيرات (defining variables)، و تصميم تخطيط الصفحة (page layout)، و كيف تجعل المدونة قابلة للتخصيص عن طريق الـ Theme Designer.

الـ Theme Designer يُسمي أيضاً Template Designer وهو طريقة تقدمها منصة بلوجر للتعديل على قوالب وثيمات بلوجر الخاصة بمدونتك.

استخدام b:skin لتنسيق ثيم بلوجر

وسم b:skin يستخدم مثل وسم <style> في كود HTML حيث يتم وضع كود لغة التنسيق CSS داخله. ولكن منصة بلوجر أعطتنا ميزة اضافية وهي إمكانية عمل متغيرات variables واستخدامها كقيم لخصائص العناصر في لغة CSS. بالإضافة إلى إمكانية ضم هذه المتغيرات في مجموعات واستخدامهم في كود CSS.

اضافة كود b:skin

كود <b:skin> لابد من اضافتها داخل وسم <head> داخل كود قالب بلوجر. لابد أن توضع كل المتغيرات ومجموعاتها داخل /** */ أو داخل <![CDADTA[ ]]> لكي لا يقوم المتصفح ولا الـ xml parser بترجمتهم (parsing). لأن هذا الكود يقوم بترجمته محرك بلوجر (Blogger engine) ويعرض كود CSS عادي جداً بعد ترجمته.

طريقة اضافة تنسيقات CSS لقالب بلوجر

<!-- Defining b:skin example -->
   .....
   <head>
     .....
     <b:skin><style typ="text/css">
         /**
          *  Variable Definitions go here.
          */
   
         /**
          *  CSS Styles go below, followed by the Variable Definitions
          */
     <style></b:skin>
     ......
   </head>
   .....

استخدام المتغيرات في تنسيق CSS في بلوجر

استخدم تاج <Variable> مع بعض الخصائص (السمات) وهم :

• name : اسم مميز وغير مكرر يتكون من حروف وأرقام.
• description : وصف قصير للمتغير. هذا الوصف يظهر في template designer أثناء تخصيص قالب بلوجر.
• type : قيمتها تكون إما Font أو color أو length أو string أو url أو background بعض هذه القيم تضيف خصائص أخرى للمتغير.
• value : قيمة المتغير
• default : القيمة الإفتراضية للمتغير. يستخدم محرك بلوجر هذه القيمة في حالة عدم وجود قيمة في value للمتغير.

القيمة المكتوبة في default و value لابد أن تتبع نوع المتغير. للتوضيح أكثر، هذه هي أنواع المتغيرات (types) وطريقة كتابتها (formats).

• color : قيمة اللون لابد أن تكون hexadecimal مثال #FF2266. يمكن استخدام هذا المتغير كقيمة للخصائص في كود CSS التي تطلب لون. عمل مجموعة من الألوان، يجعلها تظهر في قسم داخل الـ Theme Designer كما ترى في الصورة التالية.

• font : طريقة كتابة الخط تكون بهذا الترتيب font-style font-weight font-size font-family. تستخدم لإعطاء تنسيق الخط للعناصر داخل كود CSS. يظهر اختيار اللون داخل Theme Designer في بلوجر كما ترى الصورة التالية.

لمشاهدة متغيرات القالب إذهب إلى Theme ثم Customize سيفتح لك الـ Blogger Theme Designer ثم اضغط على تبويب Advanced وستجد به كل مجموعات المتغيرات التي يمكنك تغييرها.

مثال على مجموعات المتغيرات في كتابة كود ثيم بلوجر

<!-- Variable Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin>
       <style type='text/css'>
       /** Color and font variable declaration
   
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   
       */
       
       /** CSS styles */
       </style>
     </b:skin>
   
     (or)
   
     <b:skin><![CDATA[
       /** Color Variable Declaration */
       <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
   
       /** Font Variable Declaration */
       <Variable name="title.font" description="Title Font Styles" type="font" 
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     ]]></b:skin>
   </head>
   ....

استخدام مجموعات المتغيرات في بلوجر

من المفيد وضع كل مجموعة من المتغيرات تحت اسم مجموعة group مثل وضع المتغيرات الخاصة بتنسيق عنوان الصفحة تحت مجموعة واحدة. متغيرات تنسيق عنوان الصفحة هي لون العنوان وخط العنوان ولون خلفية العنوان.

عمل مجموعات من المتغيرات يجعل تخصيص هذه المتغيرات سهل جداً في الـ Blogger Theme Designer دون الدخول إلى كود ثيم بلوجر لتغيير قيم المتغيرات.

لكتابة مجموعة نستخدم وسم <group> ونستخدم الخصائص التالية مع وسم group :

• description : وصف قصير للمجموعة. هذا الوصف يستخدم لتعريف المجموعة داخل الـ Blogger Theme Designer كما ترى في الصورة التالية.

• selector : يحدد CSS Selector ليستخدم للمجموعة داخل الـ Theme Designer في بلوجر. تستخدم لتحديد المنطقة التي تتأثر بتغير هذه المجموعة من المتغيرات. يتم تحديد المكان عن طريق صندوق بلون معين حول القسم أو الجزء من الصفحة كما ترى في الصورة التالية.

مثال كود عمل مجموعة متغيرات في تنسيق ثيم بلوجر

<!-- Group Declaration -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
     ]]></b:skin>
   </head>
   ....

الكود السابق يظهر كيف تستخدم مجموعات المتغيرات، والصورة السابقة توضح كيف تظهر مجموعات المتغيرات في Theme Designer في بلوجر.

استخدام المتغيرات في كود تنسيق CSS

لكي تستخدم هذه المتغيرات داخل تنسيقات CSS استخدم طريقة استدعاء المتغير عن طريق وضع علامة الدولار قبل اسم المتغير $variable_name أو عن طريق استدعى المتغير بهذه الطريقة $(variable.name) كما تجد في المثال التالي.

<!-- Using the variables -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       /**
        * Grouping the variables shown in previous example
        */
       <Group description="Codedodle Title" selector=".header">
         <Variable name="title.color" description="Title Color" type="color" default="#000000" value="#2f2f2f"/>
         <Variable name="title.font" description="Title Font Styles" type="font" 
           default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>
   
       /**
        * CSS Style */
   
       .Header h1 a {
         color: $(title.color);
         font: $(title.font);
         text-align: center;
       }
     ]]></b:skin>
   </head>
   ....

استخدام template skin في ثيم بلوجر

يستخدم <template-skin> لنضع بها كل المتغيرات variables التي تتحكم في عرض width الصفحة وعرض أقسام الصفحة. بهذه الطريقة يمكن تغيير عرض كل أقسام الصفحة بسهولة داخل Blogger Theme Designer.

مثال على طريقة استخدام b:template-skin في ثيم بلوجر

<!-- template-skin example code -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><![CDATA[
       ....
     ]]></b:skin>
     <b:template-skin>
       <b:variable default='960px' name='page.width' type='length' value='960px'/>
       <b:variable default='0' name='main.sidebar.left.width' type='length' value='0px'/>
       <b:variable default='310px' name='main.sidebar.right.width' type='length' value='310px'/>
   
       body {
         min-width: $(page.width);
       }
   
       .sidebar-left {
         min-width: $(main.sidebar.left.width);
       }
   
       .sidebar-right {
         min-width: $(main.sidebar.right.width);
       }
      </b:template-skin>
   </head>
   ....

أنواع متغيرات أخرى

هناك أنواع أخرى من المتغيرات التي يدعمها بلوجر. هذه المتغيرات تستخدم في مناطق أخرى داخل كود ثيم بلوجر. كما تجد في المثال التالي.

<!-- other variable types -->
   ....
   <head>
   <title><data:blog.pageTitle/></title>
     <b:skin><<style type="text/css">
       /** Length Variable */
       <Variable name="content.padding" 
         description="Content Padding" 
         type="length" 
         default="10px" min="0" max="100px" 
         value="10px"/>
   
       /** URL Variable */
       <Variable name="body.background.gradient" 
         description="Body Gradient Cap" 
         type="url"
         default="url(https://domain.com/path/to/gradient.png)" 
         value="url(https://domain.com/path/to/gradient.png)"/>
   
       /** Background Variable */
       <Variable name="blog.background"
         color="$(content.background.color)"
         description="Background of blog paging area" 
         type="background"
         default="transparent none no-repeat scroll top center" 
         value="transparent none no-repeat scroll top center"/>
   
       /** String Variable */
       <Variable name="page.width" 
         description="Page Width" 
         type="string" 
         default="auto" 
         value="auto"/>
     </style>
     ]]></b:skin>
   </head>
   ....

الكود السابق يوضح اعلان متغيرات من النوع length و url و background و string.

انتهينا من الحديث عن كيفية إضافة تنسيقات CSS داخل ثيم بلوجر. وطرق الإستفادة من إمكانيات بلوجر في المتغيرات ومجموعات المتغيرات لتسهيل تخصيص القالب عند كل المدونين عن طريق Blogger Theme Designer دون الدخول للكود.

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

شرح تصميم قالب بلوجر – الجزء الثالث

في الجزء الثاني من شرح تصميم ثيم بلوجر، تكلمنا عن عنصر widget من عناصر منصة بلوجر، وتكلمنا عن مكونات b:widget وهى includable و include. في هذا المقال (الجزء الثالث من شرح تصميم قوالب بلوجر) نتحدث عن جزء هام وضروري في قوالب بلوجر. وهو كود data الخاص بمنصة بلوجر. نشرح وسم data مع شرح التكرار loop والشرط conditional tags.

استخدام الشرط في قوالب بلوجر

كما تعرف من تعلمك للغات البرمجة، هناك دالة تُسمي if/else يتم عرض المعلومات بناءاً على تحقق شرط معين أو عدم تحققه. وهذه طريقة كتابة كود الشرط في منصة بلوجر.

<b:if cond='condition'>
       [content to display if condition is true]
   <b:else/>
       [content to display if condition is false]
   </b:if>

جزء الـ b:else اختياري. أى يمكنك ألا تكتبه إن أردت. إن لم يوجد جزء else فإن الكود داخل وسم الشرط b:if سيتم عرضه في حالة تحقق الشرط فقط.

لكتابة الشرط condition لابد أن تكتب شئ نتيجته تكون إما true أو false (أى boolean type إن كنت درست لغة برمجة من قبل). يُمكنك أن تضع قيمة من الـ data نفسها، ولكن لابد أن تكون عبارة عن true أو false. مثال data:post.allowComments . قيمة allowComments تكون true إن كان مسموح بكتابة التعليقات لهذا البوست، أما إن كانت التعليقات غير مسموح بها فإن قيمتها تكون false.

أمثلة أخرى لتوضيح الفكرة أكثر

• <b:if cond='data:post.numComments > 1'> : تكون true إن كان البوست أو التدوينة عليها أكثر من تعليق.
• <b:if cond='data:blog.pageType == "item"'> : تكون true إن كانت الصفحة الحالية هي صفحة مفردة على بلوجر (item page) وهي صفحة عرض البوست بالكامل على مدونات بلوجر.

أو يمكنك مقارنةً قيمتين، وتعرض كود معين عندما تكون true وكود آخر عندما يكون false. كما تجد في المثال التالي.

<b:if cond='data:post.numComments > 1'>
       [Comments are available]
   <b:else/>
       [Comments are not available]
   </b:if>

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

وسم b:loop يسمح لك أن تكرر نفس الكود أكثر من مرة كما تحب. التكرار مفيد جداً في عرض قوائم البيانات مثل الـ labels في البوست (التدوينة). ومفيد أيضاً في عرض التعليقات لكل بوست (تدوينة). ومفيد أيضاً في عرض البوستات (التدوينات posts) داخل المدونة.

طريقة كتابة التكرار في قوالب بلوجر

<b:loop var='identifier' values='set-of-data'>
       [content that will be repeated]
   </b:loop>

سمة values لابد أن تحتوي على قائمة من الداتا. ويتم التعامل مع كل عنصر من عناصر قائمة الداتا داخل كود التكرار. يتم التعامل مع الداتا داخل التكرار باستخدام المتغير identifier الذي تجده في سمة var.

لاحظ : سمة هي ترجمة لكلمة attribute في اللغة الإنجليزية. وهي تعنى خصائص الوسم (tag). وسم هي ترجمة لكلمة tag في اللغة الإنجليزية.

الداتا تاج (Data Tag)

وسم data: من أهم وسوم (عناصر) منصة بلوجر. هذا هو المكان الذي تأتي منه كل معلومات المدونة. معلومات المدونة مثل العنوان title والرابط url والتدوينات posts وكل المعلومات التي تظهر في المدونة.

مثال على استخدام تاج داتا في منصة بلوجر

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
       <data:title/>
   </b:widget>

تاج داتا يحتوي على معلومات مختلفة بإختلاف مكان استخدامه داخل الكود. إن استخدمت تاج داتا داخل widget ستجد المعلومات خاصة بهذا الويدجت وتختلف باختلاف نوع الويدجت (widget type). أى أنها تعتبر scoped variable كما في لغات البرمجة.

أما إن استخدمت تاج داتا خارج الويدجت (أى global scope) فالمعلومات التي تحصل عليها منها تختلف عن معلومات الويدجت.

مثال توضيحي عن اختلاف مكان استخدام تاج داتا داخل كود قالب بلوجر

<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false'>
       <b:includable id='main'>
           <h3><data:title/></h3>
       </b:includable>
   </b:widget>
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
       <b:includable id='main'>
           <h3><data:title/></h3>
       </b:includable>
   </b:widget>

في الكود، استخدمنا <data:title/> في كلا الويدجت (both widgets). ولكن العنوان title لكل ويدجت سيختلف باختلاف الويدجت.

المعلومات العامة للمدونة يمكننا استدعائها عن طريق blog وهي معلومات متاحة في كل أجزاء الكود. طريقة استخدام داتا المدونة تشبه طريقة تعاملنا مع Javascript object.

يُمكننا تشبيه blog كإنها object في لغة جافاسكربت تحمل خصائص يمكن استدعائها عن طريق الـ dot notation كما نفعل في سكربتات جافاسكربت.

شكل الكود في جافاسكربت

// Consider the following scenario in JavaScript
   // Consider blog is a property of "window" and window is identical to data.
   blog = {
       'title': 'The title for the blog',
       'pageType': 'The type of the current page. One of "item", "index", "archive"',
       'homepageUrl': 'The homepage of the blog',
       'pageName': 'The title of the current page'
   };
   
   alert(blog.title);
   
   if (blog.pageType == 'item') {
       alert(blog.pageName);
   } else {
       alert(blog.title);
   }
يُمكننا كتاية نفس الكود السابق في بلوجر كالتالي:
<b:if cond='data:blog.pageType != "item"'>
       <data:blog.title/>
   <b:else/>
       <data:blog.pageName/>
   </b:if>

في بلوجر، جزء الـ blog وخصائصه تجد بها كل المعلومات عن مدونة بلوجر الحالية.

استخدام expr في منصة بلوجر

تستخدم expr لحساب قيمة معينة واضافتها لخاصية معينة (attribute). تُستخدم عادةً لحساب قيمة خاصية مُستدعاة من data: في بلوجر.

طريقة كتابة expr في قالب بلوجر

<tagName expr:attribute='expression'></tagName>

مثال لتوضيح استخدام expr في كود منصة بلوجر

<b:includable id="nextPrevLink">
       <div style="display: inline">
           <strong>
            <a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Older Posts</a>
        </strong>
           <strong>
            <a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">New Posts</a>
        </strong>
       </div>
   </b:includable>

استخدمنا expr في الكود السابق لإعطاء قيمة href وقيمة title التي استدعيناها من data. يمكننا استخدام نفس الطريقة لحساب الشرط في كود الشرط لإعطاء قيمة للخصائص (attributes) بشرط معين.

انتهينا من الحديث عن الشرط والتكرار في كود قوالب بلوجر واستخدامها داخل الثيمز.

أكمل شرح تصميم قوالب بلوجر – الجزء الرابع من هنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

شرح تصميم قالب بلوجر – الجزء الثاني

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

الشكل المبسط للـ <b:widget/> هو كالتالي

<b:widget [attributes...] />

يُمكنك أن تعتبر الويدجت عبارة عن نداء للدالة (function call) أو استدعاء للفانكشن لتقوم بعملها. ومحتوي الدالة نفسها موجود داخل بلوجر.

إنشاء ويدجت مخصص (custom widget)

لإنشاء ويدجت مخصص لابد أن نقوم ببعض التعديلات علي كود الـ widget. في البداية نبدأ بكود فتح وإغلاق الويدجت كما ترى هنا.

<b:widget [attributes...] >
  </b:widget>

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

<b:widget id='HTML1' type='HTML'>
  </b:widget>

من الأفضل اختيار الـ widget id عن طريق كتابة نوع الويدجت ورقم يبدأ من ١ ثم ٢ ثم ٣ وهكذا. مثال: إن كنت تريد عمل ويدجت للتواصل contact و ويدجت للإشارات labels من الأفضل اختيارهم كالتالي HTML1 و HTML2 وهكذا. ويمكنك النظر للكود التالي لكي تتضح الفكرة أكثر.

<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code here...]</b:widget>
  <b:widget id='HTML2' type='HTML' locked='yes' title='Labels'>[Widget code here...]</b:widget>

استخدام Include and Includable في منصة بلوجر

الويدجت يحتوى فقط على includable فقط. أما الـ includable يحتوى على جزئين:

• include : وهي تساوي استدعاء الفانشكن (function call) في لغات البرمجة. أى أنها تستدعى includable محدد ليتم تنفيذ ما فيه.
• includable : هي عبارة عن تعريف الفانكشن (function definition) وهي الأشياء التي تحدث عند استدعاء الدالة.

ستجد الصورة التالية توضح طريقة استخدام include و includable بشكل أوضح.

شرح includable في منصة بلوجر

طريقة كتابة كود includable

<b:includable id='uniqueId' var='dataForWidget'>
      [Here we can place any piece of code]
  </b:includable>

ما هي الـ Includable Attributes

• id (ضروري) : معرف مميز ولا يمكن تكراره. يتكون من حروف إنجليزية وأرقام إنجليزية.
• var (اختياري) : اسم متغير (variable). يتكون من حروف وأرقام. يُستخدم كمرجع للبيانات. نستخدمه لتمرير البيانات داخل الويدجت. سيتضح الأمر بعد قليل، لا تقلق.

شرح Include

 نستخدم كود include عندما نريد أن تستخدم نفس أسطر الكود أكثر من مرة. بدلاً من تكرار كتابة أسطر الكود في كل مرة، نكتب الأسطر داخل includable ثم نستدعيه بكود include كما ترى في الكود التالي.

<b:includable id='main'>
     <b:loop var='i' values='posts'>
        <b:include name='post' data='i'/>
     </b:loop>
  </b:includable>
  
  <b:includable id='post' var='p'>
     Title: <data:p.title/>
  </b:includable>

طريقة كتابة كود انكلود (include syntax)

<b:include name=’idOfTheIncludable’  data=’dataForIncludable’ />

شرح الـ Include Attributes

• name (ضروري) : هو معرف يتكون من حروف وأرقام. لابد أن يساوي معرف أحد الـ b:includable في نفس الويدجت.
• data (اختياري) : هو تعبير أو بيانات معينة. هذه الداتا هي قيمة الـ var في الـ includable

الإنكلودابول الإفتراضي (Default Includable)

كل الويدجت المخصصة لابد أن تحتوي على انكلودابول به id يساوي main. هذا الإنكلودابول يحتوي على كل محتوى الويدجت بالكامل. هذا هو الإنكلودابول الوحيد الذي تحتاج إلى استخدامه.

ولكن إن أردت، يمكنك اضافة انكلودابول داخل الإنكلودابول الرئيسي (id=main) أو خارجه. ثم استدعاء هذه الإنكلودابولز داخل الإنكلودابول الرئيسي بإستخدام كود الـ include كما شرحنا منذ قليل.

حتى إن كان لديك العديد من الـ includables داخل الـ widget بجانب الـ main includable فلن يتم عرض إلا الـ main includable. ولذلك تحتاج إلى استخدام الـ include لكي تعرض الـ includables الأخري التي تريدها بالإشارة إلى الـ includable id.

إن كنت تعرف لغة سي (C Language) فأنت تعرف أن هناك فانكشن تسمي main() يتم استدعائها عند بداية تشغيل البرنامج. اعتبر includable الذي به id=main كأنه الفانكشن الرئيسية في لغة البرمجة سي. أي هو الجزء الذي يتم تشغيله عند البدء في تنفيذ كود الـ widget.

مثال كامل على استخدام widget في بلوجر

<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>
      <b:includable id='main'>
          <h3>Labels</h3>
          <b:include name='labels'></b:include>
      </b:includable>
      <b:includable id='labels'>
          <ul>
              <li><a href='#' title='PHP'>PHP</a></li>
              <li><a href='#' title='Java'>Java</a></li>
              <li><a href='#' title='CPP'>CPP</a></li>
          </ul>
      </b:includable>
  </b:widget>

انتهينا من شرح الـ widget والـ includable والـ include في ثيم بلوجر.

أكمل شرح تصميم ثيم بلوجر – الجزء الثالث من هنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

شرح تصميم قالب بلوجر

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

هل هذا الشرح لك؟

لابد أن تعرف أساسيات لغة HTML ولغة CSS ولغة Javascript ولغة XML لكي تفهم شرح تصميم قوالب بلوجر بسهولة. أنت لا تحتاج أن تكون متمكن من هذه اللغات لكي تفهم كيف تعمل قوالب بلوجر. ولكنك تحتاج أن تكون متمكن منهم لكي تستطيع أن تصمم وتكتب كود ثيم مدونة بلوجر احترافية.

كيف يعمل بلوجر ؟

يرسل المتصفح طلب للمدونة (http request) فيقوم بلوجر بترجمة كود XHTML الخاص بـ ثيم بلوجر والتواصل مع قاعدة البيانات عند الحاجة، ثم يرسل للمتصفح كود HTML لعرضه للمستخدم الذي طلب الصفحة.

الهيكل الأساسي لثيم بلوجر (The Basic Layout)

<?xml version="1.0" encoding="UTF-8" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
  <title><data:blog.pageTitle/></title>
  </head>
  <body>
   <!-- BODY CONTENTS -->
  </body>
  </html>

ثيم بلوجر (Blogger Theme) يُسمي أيضاً قالب بلوجر (Blogger Template). ثيم بلوجر يتكون من XHTML وعناصر بلوجر (Blogger Elements).

في الكود بالأعلى هناك بعض التعريفات الخاصة بـ xmlns وهى اختصار لـ XML NameSpace. هذه التعريفات خاصة بمنصة بلوجر المقدمة من جوجل.

ما معنى كل تعريف من تعريفات xmlns ؟

• xmlns:b تتيح لنا استخدام عناصر بلوجر (Blogger Elements)
• xmlns:data تتيح لنا التواصل مع قاعدة البيانات الخاصة بمدونة بلوجر
• xmlns:expr يتم عن طريقها حساب الـ attributes (سأشرحها بشكل أكثر تفصيلاً)

لاحظ: يمكنك استبدال xmlns:b بـ xmlns:blog واستبدال xmlns:data بـ xmlns:d إن أردت. ولكن أنصحك باستخدام الإعدادات الافتراضية أفضل.

قبل أن نبدأ في كتابة كود ثيم بلوجر

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

الـ Section في بلوجر

تصميم ثيم بلوجر يتكون من سكشن (sections). كل جزء من أو قسم من صفحة الموقع عبارة عن سكشن. استخدام السكشن (section) في قوالب بلوجر يشبه استخدامه في لغة HTML5.

في الصورة السابقة تجد تصميمات للهيكل العام لصفحات الويب. كل جزء من هذه الأجزاء الملونة في كل صفحة يمثل سكشن من تصميم الصفحة.

كتابة كود السكشن في بلوجر

هذا هو كود كتابة سكشن في بلوجر

<b:section id='' class='' maxwidgets='' showaddelement=''> 
  </b:section>

يمكن كتابة كود HTML حول السكشن ولكن داخل السكشن لا يمكن كتابة كود HTML نهائياً. لكي تحدد محتوى السكشن نستخدم عنصر ويدجت (widget) من عناصر بلوجر. سنتكلم عن ويدجت بعد قليل.

هذه الـ attributes الموجودة في عنصر سكشن من عناصر بلوجر يتم ترجمتها عن طريق بلوجر. وهذه الـ attributes تعنى:

• id (ضروري) : اسم مميز ولا يمكن تكرار استخدامه داخل نفس القالب. يمكنك استخدام حروف اللغة الإنجليزية وأرقام اللغة الإنجليزية فقط لكتابته.
• class (اختياري) : الأسماء الشائعة للكلاسات هي navbar و header و main و sidebar و footer. استخدام هذه التسميات يسهل على بلوجر تبديل القوالب. ولكن يمكنك استخدام أسماء كلاسات كما تحب.
• maxwidgets (اختياري) : يحدد الحد الأقصي لعدد الـ widgets التي يمكن اضافتها داخل هذا السكشن. إن لم تحدد رقم معين، عدد الـ widgets داخل السكشن لن يكون محدود.
• showaddelement (اختياري) : يحتوى على yes أو no والقيمة الإفتراضية هي yes. هذا الخيار يحدد إن كان سيظهر زر اضافة المزيد من الـ widgets داخل صفحة التصميم على بلوجر أم لا.

• growth (اختياري) : يمكن أن يكون horizontal أو vertical مع العلم أن القيمة الافتراضية هي vertical. هذا يحدد إن كنت الـ widgets داخل السكشن مرتبة جنب بعضها (side-by-side) أم مرتبة تحت بعضها (stacked).

السكشن في بلوجر يمكن أن يحتوي على widgets فقط. لا يمكنه أن يحتوى سكشن آخر أو كود HTML آخر.

مثال عملي على كود سكشن

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='main' class='main' maxwidgets="1" showaddelement="no">
  <!-- Section contents -->
  </b:section>
  <b:section id='footer' class='footer' showaddelement="no">
  <!-- Section contents -->
  </b:section>

لاحظ: لابد أن يحتوي ملف ثيم بلوجر على ٢ سكشن وإلا ستجد رسالة خطأ أثناء حفظ التغييرات في تحرير قالب بلوجر.

الـ Widget في بلوجر

تحتوى الـ sections على widgets فقط. الأقسام (السكشن) هي مجرد عناصر لتخطيط شكل المدونة. أما الويدجت يحتوى على المعلومات التي يتم عرضها.

أبسط شكل للويدجت هو عبارة عن سطر واحد يمثل مكان المعلومات التي ستظهر في مدونة بلوجر. هناك بعض الويدجتس الإفتراضية (default widgets) المتاحة في بلوجر. ويمكنك أيضاً إنشاء ويدجت مخصص (custom widget).

المعلومات الخاصة بالويدجت يتم تخزينها في قاعدة بيانات بلوجر. ويتم التعامل مع هذه المعلومات عند عرض الويدجت فقط.

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

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

• id (ضروري) : يحتوي على حروف إنجليزية وأرقام إنجليزية فقط. لابد أن يكون مميز وغير مكرر داخل نفس الثيم. لا يمكن تغيير id الويدجت إلا إن حذفت الويدجت وأنشأت ويدجت جديد.
• type (ضروري) : يحدد نوع الـ widget وهو واحد من هذه الأنواع التالية:
• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• NavBar
• VideoBar
• NewsBar
• locked (اختياري) : يمكن أن تكون yes أو no والقيمة الإفتراضية هي no. الويدجت المغلق (locked widget) لا يمكن حذفه من تبويب تخطيط المدونة (Layout). كما ترى في الصورة التالية.

• title (اختياري) : عنوان الويدجت. إن لم تحدد عنوان للويدجت سيتم استخدام عنوان افتراضي مثل List1.
• pageType (اختياري) : يمكن أن يكون all أو archive أو main أو item مع العلم أن القيمة الإفتراضية هي all. يتم عرض الويدجت في الصفحات التي تحددها في ثيم مدونتك. كل الويدجتس تظهر في تخطيط القالب (Layout) بغض النظر عن الـ pageType المحدد لها.
• mobile (اختياري) : يحتوي على yes أو no أو only مع العلم أن القيمة الإفتراضية هي default. هذه القيمة تحدد إن كان هذا الويدجت سيتم عرضة على شاشة الموبايل أم لا. بشكل إفتراضي سيتم عرض Header و Blog و Profile و PageList و AdSense فقط إن كنت اخترت default كقيمة للـ mobile.

مثال على كتابة كود الويدجت (widget) في بلوجر

<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
  <b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
  <b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
  <b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
  <b:widget id='Label1' type='Label' locked='false' />
  </b:section>

طريقة كتابة الكود (syntax) والشرح (documentation) تم أخذه من توثيق بلوجر الرسمي (Official Blogger Documentation).

أكمل شرح تصميم قالب بلوجر – الجزء الثاني من هنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

تحريك العناصر في css

تحريك وانتقال العناصر في CSS3 هو من أهم الأمور التي يجب أن تتقنها لكي تصمم صفحة هبوط ممتازة. لغة CSS3 هي إصدار أحدث من لغة CSS المتخصصة في تنسيق صفحات الويب. إصدار CSS3 يضيف بعض الأشياء المهم لتنسيق صفحات الإنترنت؛ مثل التحريك (animation)، والانتقالات (transition).

صفحة الهبوط (Landing Page) هي عبارة عن صفحة ويب تقدم لك خدمة أو منتج بداية من مميزات المنتج مروراً بطريقة استخدامه حتى تصل إلى طريقة شراؤه. صفحات الهبوط ضرورية للمنتجات والخدمات لأنها تساهم بشكل كبير جداً في دفع الزائر إلى شراء المنتج بسبب الإبهار والجمال الذي تمتلئ به صفحات الهبوط من ألوان وتحريك وإنتقالات وتصميمات وصور متحركة وفيديوهات.

هناك نوعين من الحركة؛ ١. التحريك. ٢. حركة الانتقال من حالة إلى أخرى.

أولاً: التحريك (Animation)

التحريك هو إعطاء خطوات حركة لعناصر HTML. نحدد العنصر من خلال الـ CSS Selector ثم نكتب كود التحريك. مثال على التحريك في CSS :

كود HTML

<div class="box"></a>

كود CSS

.box {
display:block;
margin:auto;
animation-name:movetoround;
animation-duration: 1s;
animation-iteration-count:1;
animation-fill-mode:forwards;
animation-delay:1s;
animation-direction:alternate;
animation-timing-function:ease-in-out;
}
@keyframes movetoround {
0% {0 0 0 0}
25% {50% 0 0 0}
50% {50% 50% 0 0}
75% {50% 50% 50% 0}
100% {50% 50% 50% 50%}
}

لنبدأ في معرفة معنى الكود السابق.

animation-name نكتب بها اسم الحركة حسب الإسم الذي اخترناه عندما كتبنا الـ keyframes كما ترى في الكود.

animation-duration هي مدة تنفيذ التحريك. لابد أن تختار هذه المدة لكي تعمل الحركة. هذه الفترة الزمنية تقاس بالثانية مثل 2s معناها ثانيتين.

animation-iteration-count هي عدد مرات تكرار الحركة. تريد الحركة أن تحدث مرة واحدة اختر ١، أما إن أردت الحركة أن تتكرر ثلاث مرات اكتب ٣، أما إن أردت أن تتكرر الحركة دائماً بدون توقف اختر infinite .

بعد إنتهاء التحريك يرجع العنصر إلى الشكل العادي، ولكن إن أردت أن يثبت العنصر على آخر مرحلة من مراحل التحريك، استخدم خاصية animation-fill-mode بقيمة forwards كما ترى في الكود.

إن أردت أن تبدأ الحركة بعد ثانية من تحميل العنصر على الشاشة، استخدم خاصية animation-delay وحدد وقت تأخير التحريك إلى 1s أو كما تريد.

إن أردت أن تتم الحركة في اتجاه ثم تتكرر في المرة الأخرى في الاتجاه المعاكس، استخدم خاصية animation-direction بقيمة alternate كما ترى في الكود. يمكنك أيضاً أن تختار اتجاه الحركة إلى عكس الإتجاه المكتوب في الـ keyframes أو في الإتجاه العادي للحركة.

أما animation-timing-function تحدد وقت حدوث كل جزء من التحريك. مثلاً: إن أردت أن تبدأ الحركة ببطء ثم تسرع ثم تنتهي ببطء استخدم قيمة ease-in-out كما ترى في الكود. هذه هي طريقة التحريك القريب من الواقع لأنها تتبع قوانين الفيزياء مثل حركة السيارة على الطريق؛ تبدأ ببطء من السكون ثم تسريع كما تشاء ثم ترجع لتبطئ مرة أخرى حتى تتوقف.

أما إن أردت أن يحدث التحريك بشكل ثابت دائماً دون إبطاء أو تسريع استخدم قيمة linear . أما إن أردت أن تجعل التحريك بطئ في البداية فقط استخدم ease-in وإن أردت أن تنتهي الحركة ببطء استخدم قيمة ease-out .

كتابة مراحل التحريك

نستخدم keyframes لكتابة خطوات أو مراحل الحركة. نبدأ بـ 0% وننتهي بـ 100% . يمكن أن نستخدم قيم وسطية مثل 50% أو لا على حسب التحريك الذي نريده.

لا تنسى أن تكرر الـ @keyframes للمتصفحات المختلفة لكي تعمل مع كل المتصفحات. استخدم @-moz-keyframes و @-webkit-keyframes و @-o-keyframes لتدعم متصفح سفارى، ومتصفح موزيللا فايرفوكس، ومتصفح أوبرا، ومتصفح جوجل كروم (طبعاً).

ثانياً: الانتقال

بدل من التحويل للون الأبيض إلى اللون الأسود، نستخدم الانتقال لجعل التحويل بين اللون الأبيض والأسود يتم في خطوات بداية من الأبيض ثم الأبيض المطفي ثم الأبيض الغامق ثم الرمادي الفاتح ثم الرمادي الغامق ثم الأسود الفاتح حتى نصل إلى اللون الأسود. وهذه هي فكرة الانتقال (transition).

كود HTML

<div class="trans"></div>

كود CSS

.trans {
background: black;
width:200px;
height:200px;
transition-property: all;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function:ease-in-out;
}
.trans:hover {
border-radius: 50%;
}

دعونا نبدأ في فهم الكود السابق.

نستخدم transition-property لتحديد الخاصية التي نريد عمل حركة انتقال لها. إن أردنا عمل حركة انتقال لتغير اللون نستخدم color، وإن أردنا عمل حركة انتقال عند تغير لون الخلفية نستخدم background أما إن أردنا أن نعمل حركة انتقال لكل الخصائص المتغيرة نكتب all كما ترى في الكود. يُمكننا أيضاً أن نضع أكثر من خاصية ونفصل بينهم بفاصلة انجليزية (color, background, border-radius مثلاً).

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

اسم الخاصية (property name)	النوع المدعوم (type)
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

transition-duration لتحديد الفترة الزمنية لتنفيذ حركة الانتقال من حالة لحالة أخرى.

transition-delay لتحديد مدة التأخر في بدء حركة الإنتقال. أى فترة الانتظار قبل بدء الانتقال.

transition-timing-function وهي نفس معنى animation-timing-function ومعناها سرعة إتمام التحريك. تبدأ الحركة ببطء ثم تسرع (ease-in) أم تبدأ بسرعة ثم تبطئ (ease-out) أم تبدأ وتنتهي بنفس السرعة (linear).

لاحظ أن الانتقال يحتاج إلى شئ يغير حالة العنصر. يُمكن استخدام التغير مع الـ :hover أو :active وغيرها من الأحداث التي يمكن أن تغير حالة عناصر HTML في صفحة الويب.

تكلمنا عن التحريك في لغة CSS لتنسيق صفحات الويب. قريباً سأقوم بعمل أمثلة كاملة على التحريك والانتقال وأنشرها هنا على موقع أبانوب حنا للبرمجيات.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

اضافة ميزة الوضع الداكن لموقعك - Dark Mode

هناك الكثير من الطرق لدعم الوضع الداكن في موقعك. ولكن أفضل طريقة لتنشيط الوضع الداكن (الوضع الليلي) في موقعك هو أن تستخدم إمكانية إتباع حالة نظام التشغيل. إن كان الوضع الداكن يعمل في نظام التشغيل الآن، موقعك يصبح داكن. أما إن كان نظام التشغيل يعمل بالوضع العادي (light mode)، موقعك يظهر بالوضع النهاري الأبيض العادي.

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

خطوات إضافة الوضع الداكن لموقعك

استخدم هذا الكود في لغة CSS الخاصة بتنسيق مواقع الويب.

@media (prefers-color-scheme: dark){
// dark mode css styles
}

لو كان الوضع الليلي الداكن مفعل في الجهاز الذي يشاهد موقعك، سوف يستخدم المتصفح تنسيقات الـ CSS الموجودة في الكود السابق. لذلك ضع كل تنسيقات الألوان الخاصة بالثيم الأسود لموقعك.

أما تنسيقات الوضع النهاري الأبيض العادي، ضعها في الكود التالي.

@media (prefers-color-scheme: light){
// day mode css styles
}

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

هل هناك طرق أخرى لتفعيل الوضع الداكن على الموقع؟

نعم، يمكنك أن تستخدم ملفين للتنسيقات (2 stylesheets) وتستخدم كود جافاسكربت للتبديل بين الملفين على حسب اختيار المستخدم من خلال زر.

وهناك طريقة أخرى أعتبرها أكثر ذكاءاً وهي استخدام المتغيرات في لغة CSS وتبديل المتغيرات بإستخدام لغة جافاسكربت بدلاً من تغيير ملف التنسيق بالكامل.

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

انتهينا من الحديث عن كود دعم الوضع الداكن على موقعك. لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.

كيفية تثبيت تعريفات ويندوز 10 - شرح بالصور

الكثير من المشكلات تحدث في تعريفات الأجهزة الملحقة بالكمبيوتر. أكثر ويندوز يعاني من مشكلات في التعريفات هو ويندوز ٨ و ويندوز ٨.١ أما ويندوز ٧ و ويندوز ١٠ تعريفاتهم أسهل وأكثر دقة وأقل مشكلات. تحدث غالباً مشكلات التعريفات في ويندوز ١٠ عندما ترقي النظام من ويندوز ٧ إلى ويندوز ١٠ ، أو عندما تستخدم برمجيات خاصة بتنظيف النظام وتسريعه!!

ويندوز ١٠ يقوم بتثبيت جميع التعريفات للأجهزة الملحقة بالكمبيوتر بشكل تلقائي. ولكن أحياناً تحدث أخطاء في تثبيت البرامج أو تعارضها أو حدوث مشكلة بسبب برنامج خبيث (Malware). كل ما عليك هو الذهاب إلى مدير الأجهزة device manager عن طريق الضغط كلك يمين على أيقونة الكمبيوتر This PC ثم اختيار إدارة Manage.

في نافذة إدارة الأجهزة، تجد كل تعريفات الأجهزة الملحقة. إن وجدت أيقونة صفراء على شكل مثلث  بجانب أي تعريف، فإعلم أن هذا التعريف لم يتم تثبيته أو أنه لا يعمل بشكل جيد. لإعادة تثبيت التعريف بشكل جيد اضغط كلك يمين عليه ثم اختر Update Driver Software كما ترى في الصورة.

بعد إتمام التحديث، ستجد الجهاز الملحق يعمل بشكل جيد جداً. الجهاز الملحق (device) يمكن أن يكون طابعة، أو ماسح ضوئي (سكانر)، أو ماوس (فأرة)، أو لوحة مفاتيح (كيبورد)،.. إلخ.

إن لم يتم حل المشكلة بالتحديث، أو أن الجهاز لا يظهر في إدارة الأجهزة الملحقة من الأساس فالحل الأفضل هو الذهاب إلى الموقع الرسمي للشركة المصنعة للجهاز الملحق وتنزيل التعريف المناسب وتثبيته. مثال: إن كان لديك طابعة من شركة دل (DELL) ولا تعمل على جهازك. من الأفضل أن تبحث على جوجل عن تعريفات طابعة دل (DELL printer drivers) ثم تذهب إلى الموقع الرسمي لشركة دل وتختار موديل الطابعة ونظام التشغيل ومعمارية نظام التشغيل ومن ثم تقوم بتنزيل تعريف الطابعة ثم تثبيته مثل أى برنامج آخر.

معرفة موديل الطابعة

موديل الطابعة (Model Number) هو عبارة عن حرف أو أكثر مع بعض أرقام مثل lp650 مثلاً.

معرفة نظام التشغيل

نظام التشغيل هو ويندوز ١٠ مثلاً أو ويندوز ٧ أو لينكس أو ماك أو إس.. إلخ.

معرفة معمارية نظام التشغيل

معمارية نظام التشغيل (OS Architecture) تكون إما ٣٢ بت أو ٦٤ بت. لابد من اختيار هل نظام التشغيل ٣٢ بت أم ٦٤ بت. يُمكنك معرفة هل نظام التشغيل لديك ٣٢ بت أم ٦٤ بت من معلومات الجهاز عن طريق الضغط كلك يمين على This PC أو My Computer ثم اختر خصائص (properties).

ستجد أن الجهاز ٣٢ بت أو x86 ومعناهما أن نظام التشغيل يدعم معمارية ٣٢ بت فقط. أما إن وجدت ٦٤ بت أو x64 معناهما أن نظام التشغيل يدعم معمارية ٦٤ بت. ستجد هذه المعلومات كما ترى في الصورة التالية.

انتهينا من الحديث عن كيفية تثبيت تعريفات ويندوز ١٠ أو ويندوز ٧ بدون إستخدام برامج. لأن البرامج التي تثبت التعريفات تلقائياً غالباً يكون بها فيروسات وبرمجيات خبيثة وخاصةً الـ rootkit الذي يصيب نظام التشغيل مباشرةً. لذلك أنصحك بأن تتبع أحد الطريقتين كما تحدثنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.