إضافة أيقونات وسائل التواصل الاجتماعي - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

📚 إضافة أيقونات وسائل التواصل الاجتماعي

المفاهيم الأساسية

الصورة المرتبطة (Linked Image): صورة يتم إدراجها في الصفحة ويتم ربطها تشعبيًا إلى وجهة أخرى، حيث يتم توجيه المستخدم عندما يضغط عليها على الصورة.

خريطة المفاهيم

```markmap

إنشاء متجر إلكتروني باستخدام LocalWP

مرحلة التخطيط

تحديد الهدف من المتجر

اختيار اسم المجال

مرحلة التصميم

إنشاء نموذج أولي

تحرير صفحات المتجر الإلكتروني

#### حذف بعض الصفحات

#### تحرير صفحة "حول"

##### الوصول للوحة تحكم ووردبريس

##### تغيير اسم "صفحة النموذج" إلى "حول"

##### خطوات تحرير صفحة "حول"

###### 1. من لوحة التحكم (Dashboard)، اضغط على قسم صفحات (Pages)، وابحث عن صفحة حول (About)، ثم اضغط على زر تحرير (Edit).

###### 2. حدد النص واحذفه لإضافة النص الذي تريده.

###### 3. اكتب بعض المعلومات عن المتجر ثم غير خلفية (Background) الخاصة بالمكون.

###### 4. أضف معلومات "اتصل بنا" (Contact us) بنفس الطريقة.

#### تصميم الصفحة الرئيسية

##### تضمين قائمة التنقل

##### تضمين شعار واسم المتجر

##### تغيير صورة الصفحة الرئيسة

###### من قسم "صفحات"، انتقل إلى "الصفحة الرئيسة" ثم اضغط على "تحرير"

###### اضغط على مُكوّن الصورة، ثم اضغط على زر "استبدال"

###### اضغط على زر "رفع"، واختر الصورة، ثم اضغط على "فتح"

###### اضغط على زر "محاذاة"، ثم اضغط على "عرض واسع"

###### اضغط على زر "تبديل الارتفاع الكامل"، وغير "عامة الغشاء" من قسم "اللون"

##### إضافة رسالة ترحيبية إلى الصفحة الرئيسية

###### تحرير نص في موقع المتحرر الإلكتروني

####### 1. انتقل إلى المكون الذي تريد تحريره، واضغط على زر "محاولة استعادة مكون" الخاص بالرئيسية.

####### 2. اكتب النص الذي سيظهر في الصفحة الرئيسية (مثل: "مرحباً بك في متجرنا الإلكتروني").

####### 3. حدد النص، ثم اجعله عريضاً (Bold).

####### 4. حدد المكونات الأخرى من الصفحة إذا كنت لا تريد استخدامها، واضغط على زر "الخيارات".

####### 5. اضغط على "إزالة المكون (فقرة)".

####### 6. اضغط على "Remove Media & Text (فقرة)".

#### إدارة الصفحات في لوحة التحكم

##### تسجيل الدخول إلى لوحة التحكم

###### نموذج تسجيل الدخول

###### رسالة خطأ عند إدخال كلمة مرور خاطئة

##### عرض قائمة الصفحات

###### تصفية الصفحات حسب الحالة (الكل، المنشورة، المسودات)

###### البحث في الصفحات

###### عرض تفاصيل الصفحة (العنوان، الكاتب، التاريخ)

##### إضافة صفحة جديدة

##### تحرير صفحة موجودة

###### تعديل عنوان الصفحة ومحتواها

###### تحديد صفحة رئيسية وترتيبها

###### اختيار قالب الصفحة

###### التحكم في السماح بالتعليقات

###### تحديد حالة الصفحة (نشر، مسودة) ورؤيتها

###### معاينة الصفحة وحفظها

#### إدراج صورة جديدة في المحرر

##### اختيار الصورة من الجهاز

###### اختيار ملف الصورة (مثل Riyadh_Saudi_Arabia.jpg) من مجلد الصور

##### فتح الصورة

###### الضغط على زر 'Open' (فتح) لإدراج الصورة في المحرر

##### تغيير عرض الصورة

###### من قائمة خيارات المحاذاة والعرض، اختيار 'عرض واسع' (أقصى عرض 1200px)

##### استخدام أيقونة المحاذاة

###### النقر على أيقونة تغيير المحاذاة في شريط أدوات المكون العلوي

##### ضبط إعدادات المكون الجانبية

###### ضبط النص البديل وحجم الصورة من القائمة الجانبية اليسرى

###### الضغط على زر تحديث (Update) لحفظ التغييرات

#### تحويل صفحة إلى مسودة

##### خيارات إدارة المكونات

###### إلغاء المزيد من الإعدادات

###### تحديد المكون الأب (غلاف)

###### نسخ المكون

###### تكرار

###### إدراج قبل

###### إدراج بعد

###### نقل إلى

###### تحرير كـ HTML

###### تأمين

###### تجميع

###### إزالة المكون (فقرة)

##### إعدادات الصفحة العامة

###### التاريخ والوقت (مثال: 15 مارس 2023، 11:16، UTC+0)

###### النشر على نطاق محلي (مثال: my-giftshop.local)

###### إعدادات الرابط

###### إعدادات النموذج (مثال: Saad، كتاب)

###### إعدادات المراجعات

###### الصورة البارزة

###### مناقشة

###### خصائص السمة

#### إعدادات المكونات والصفحة

##### خيارات زر الإعداد (Setting)

###### المكونات

###### صفحة

###### ابدأ ببناء مكونات لكل الحكايا

###### فترة

###### اللون

###### نص

###### خلفية

###### رابط

###### الخطوط

###### حجم التراصي

####### XXL

####### XL

####### L

####### M

####### S

###### أبعاد

##### محتوى صفحة "متجرنا"

###### يبيع ملابس وإكسسوارات مصنوعة يدوياً في السعودية وصديقة للبيئة

###### تشجيع ودعم الحرفيين

###### مفهوم صفر نفايات: التخلص من المنتجات المهدرة أو غير الضرورية

###### جميع المنتجات مصممة ومصنعة 100% في السعودية

##### محتوى صفحة "اتصل بنا"

###### التواصل عبر وسائل التواصل الاجتماعي

#### إضافة صورة في صفحة "حول"

##### 1. اضغط على زر "إضافة مكون" (Add Block)، ثم اختر خيار "صورة" (Image).

##### 2. اضغط على زر "رفع" (Upload)، اختر الصورة، ثم اضغط على "فتح" (Open).

##### 3. اضغط على أداة "قص" (Crop)، اختر نسبة العرض إلى الارتفاع "مربع" (Square)، ثم اضغط على "تطبيق" (Apply).

##### 4. من زر "محاذاة" (Align)، اختر "عرض واسع" (Wide width).

#### إدراج صورة جديدة في المحرر (استكمال)

##### اختيار الصورة من الجهاز

###### اختيار ملف الصورة (مثل handmade_clothes.jpeg) من مجلد الصور

##### فتح الصورة

###### الضغط على زر 'Open' (فتح) لإدراج الصورة في المحرر

##### تغيير عرض الصورة

###### من قائمة خيارات المحاذاة والعرض، اختيار 'عرض واسع' (أقصى عرض 1200px)

##### استخدام أيقونة المحاذاة

###### النقر على أيقونة تغيير المحاذاة في شريط أدوات المكون العلوي

##### ضبط إعدادات المكون الجانبية

###### ضبط النص البديل وحجم الصورة من القائمة الجانبية اليسرى

###### الضغط على زر تحديث (Update) لحفظ التغييرات

##### خيارات تعديل الصورة في شريط الأدوات العلوي

###### استبدال (Replace)

###### تطبيق إلغاء (Apply Cancel) لتغيير نسبة العرض إلى الارتفاع

####### الأصلي (Original)

####### مربع (Square)

####### منظر أفقي (Landscape)

###### محاذاة (Align) لتحديد موضع الصورة

####### محاذاة لليسار (Align left)

####### محاذاة للوسط (Align center)

####### محاذاة لليمين (Align right)

###### خيارات عرض الصورة

####### بدون أقصى عرض 650px (No max width 650px)

####### عرض واسع أقصى عرض 1200px (Wide display max width 1200px)

####### عرض كامل (Full display)

#### إضافة أيقونات وسائل التواصل الاجتماعي

##### إضافة صورة مرتبطة (Linked Image)

###### خطوات إضافة صورة مرتبطة في صفحة "حول"

####### 1. اسجل معلومات "اتصل بنا" (Us Contact)، اضغط على زر إضافة مكون (Add Block)، ثم زر تصفح الكل (Browse All).

####### 2. ابحث عن خيار أعمدة (Column) وحدده.

####### 3. اختر عدد الأعمدة التي تحتاجها، وستظهر الأعمدة في صفحتك.

####### 4. اضغط من العمود الأول على زر إضافة مكون (Add Block)، ثم اختر صورة (Image).

####### 5. حقل الصورة كما تعلمت سابقًا وحاذفها للوسط (Center).

####### 6. اضغط على زر أضف رابطًا (Add link) ثم أنسق عنوان URL الذي تريده واضغط على زر تطبيق (Apply).

```

نقاط مهمة

• الغرض: إضافة عناوين الموقع على وسائل التواصل الاجتماعي والبريد الإلكتروني في معلومات الاتصال للتواصل مع العملاء.
• يتم العمل في صفحة "حول" (About).
• يمكن إضافة أيقونات التواصل الاجتماعي كصور مرتبطة (Linked Images) يتم ربطها بعناوينها على الإنترنت.
• خطوات الإضافة تتضمن استخدام مكون "أعمدة" (Columns) لتنظيم الصفحة، ثم إضافة صورة داخل عمود وربطها برابط.

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

لا تزال تعمل في صفحة حول (About)

اسجل معلومات اتصال بنا (Us Contact)، اضغط على زر إضافة مكون (Add Block)، ثم زر تصفح الكل (Browse All) 1. وابحث عن خيار أعمدة (Column) وحدده. 2. اختر عدد الأعمدة التي تحتاجها، 3. وستظهر الأعمدة في صفحتك. 4. اضغط من العمود الأول على زر إضافة مكون (Add Block)، 5 ثم اختر صورة (Image). 6. حقل الصورة كما تعلمت سابقًا وحاذفها للوسط (Center). 7. اضغط على زر أضف رابطًا (Add link) 8 ثم أنسق عنوان URL الذي تريده واضغط على زر تطبيق (Apply). 9.

اتصل بنا يمكنك أن تتواصل معنا على وسائل التواصل الاجتماعي

--- SECTION: إضافة أيقونات وسائل التواصل الاجتماعي --- ستضيف عناوين الموقع على وسائل التواصل الاجتماعي والبريد الإلكتروني في معلومات الاتصال، حيث يمكن للعملاء التواصل وإرسال الرسائل من خلال هذه العناوين، وستضيف أيضًا بعض الصور المرتبطة بهذه العناوين. الصورة المرتبطة (Linked Image) هي صورة يتم إدراجها في الصفحة ويتم ربطها تشعبيًا إلى وجهة أخرى، حيث يتم توجيه المستخدم عندما يضغط عليها على الصورة. لا تزال تعمل في صفحة حول (About) --- SECTION: لإضافة صورة مرتبطة --- --- SECTION: 1 --- اسجل معلومات اتصال بنا (Us Contact)، اضغط على زر إضافة مكون (Add Block)، ثم زر تصفح الكل (Browse All) 1. وابحث عن خيار أعمدة (Column) وحدده. 2. اختر عدد الأعمدة التي تحتاجها، 3. وستظهر الأعمدة في صفحتك. 4. اضغط من العمود الأول على زر إضافة مكون (Add Block)، 5 ثم اختر صورة (Image). 6. حقل الصورة كما تعلمت سابقًا وحاذفها للوسط (Center). 7. اضغط على زر أضف رابطًا (Add link) 8 ثم أنسق عنوان URL الذي تريده واضغط على زر تطبيق (Apply). 9. اتصل بنا يمكنك أن تتواصل معنا على وسائل التواصل الاجتماعي --- VISUAL CONTEXT --- **IMAGE**: لا تزال تعمل في صفحة حول (About) Description: An illustration of a robot head with a screen showing binary code, and a speech bubble containing text. Context: Illustrates the concept of 'About' page functionality in web development. **IMAGE**: Untitled Description: A screenshot of a web page editor interface, showing options for adding content blocks. Data: Shows the interface for adding different types of content blocks, including images and columns. Context: Visual aid for step 1 of adding content blocks and columns. **IMAGE**: Untitled Description: A screenshot showing the 'Add Block' menu with various options like 'Image', 'Group', 'Column', 'Heading', 'Paragraph', 'Button', 'Gallery', 'Quote', 'Cover', 'File', 'Audio', 'Video', 'Columns', 'Separator', 'More'. Number 1 is highlighted over the 'Columns' option. Data: Illustrates the selection of the 'Columns' block type from the 'Add Block' menu. Context: Visual aid for step 1 of selecting the 'Columns' block. **IMAGE**: Untitled Description: A screenshot showing column layout options. Number 3 is highlighted over a layout option. Options include 33/33/33, 33/66, 66/33, 50/50, 100, and 25/50/25. Data: Displays various predefined column layouts that can be chosen for the page structure. Context: Visual aid for step 2 of selecting a column layout. **IMAGE**: Untitled Description: A screenshot of a web page editor interface, showing a section titled 'اتصل بنا' (Contact Us) with options for adding social media icons. Number 2 is highlighted over an 'أعمدة' (Columns) icon within a toolbar. Data: Shows the interface for managing contact information and social media links, with an option to adjust column layout. Context: Visual aid for managing contact information and social media integration.