המרת HTML לוורדפרס (שלב אחר שלב)


המרת HTML לוורדפרסהדרך מאתרים שנבנו עם HTML טהור לוורדפרס לא הייתה קצרה. מחווית טקסט כללית, עיצוב אתרים עבר לנוכחות אינטרנטית אינטראקטיבית ביותר. בנוסף לכך, אנחנו כבר לא צריכים לכתוב סימון בעצמנו אלא יכולים לאפשר למערכות ניהול תוכן לבצע את ההרמה הכבדה.


עם זאת, זה לא אומר שאתרי HTML סטטיים אינם קיימים יותר. למעשה HTML5, האיטרציה האחרונה של שפת הסימון, היא מאוד חזקה ומאפשרת לך לבנות אתרים איכותיים ללא CMS מאחוריהם..

עם זאת, נתח השוק ההולך וגדל של וורדפרס מראה כי יותר ויותר אנשים עוברים לפלטפורמה.

נתח שוק וורדפרס בשנת 2019

עבור חלקם זה אומר לעבור מ- HTML סטטי לוורדפרס. זו יכולה להיות משימה מפחידה, אך פוסט זה ינסה להסביר כיצד לעשות זאת בכמה דרכים פשוטות.

להלן, נראה לך מספר דרכים כיצד להמיר מ- HTML ל- WordPress. ראשית, תלמדו מהן האפשרויות השונות כמו גם היתרונות והחסרונות שלהם. לאחר מכן, נראה לך כיצד לבצע כל אחד מהם צעד אחר צעד.

בואו נתחיל.

Contents

שלושת הדרכים לעבור מ- HTML סטטי לוורדפרס

כדי לעבור מ- HTML ל- WordPress, עליך להפוך את עיצוב ה- HTML שלך לנושא WordPress. נושא שולט במראה ובתחושה של אתר וורדפרס, בעוד הפונקציונליות ניתנת על ידי CMS עצמה כמו גם תוספים נוספים.

כדי לבצע את המתג, יש לך כמה אפשרויות. איזה מהם מתאים לכם תלוי בגורמים כמו הזמן והכסף שאתם מסוגלים ומוכנים להשקיע, כישורי הקידוד שלכם והעדפות אישיות. להלן האפשרויות העיקריות.

א) המרה ידנית של HTML לנושא של וורדפרס

האפשרות הראשונה היא גם הטכנית ביותר. אם תלך במסלול זה, תיקח את הקוד הקיים שלך ותשתמש בו כנקודת מוצא ליצירת קבצי הנושא של וורדפרס.

זה לא מסובך מדי, במיוחד אם יש לך ניסיון בקידוד. אתה יכול לשלוף אותו עם קצת ידע ב- HTML, CSS, וקצת PHP. חלק גדול ממנו הוא העתקה והדבקה.

החיסרון: בעוד שתסיים עם נושא וורדפרס עובד, לא יהיו לו את כל היכולות שיש לוורדפרס להציע. לדוגמה, אלא אם תבנה אותו לאחר מעשה, האתר שלך יהיה ללא אזורי ווידג’ט או יכולת לשנות את התפריט שלך מהתכנית של וורדפרס..

בעוד שהאתר שלך יעשה את העבודה שלו, לא תוכל לנהל אותו לחלוטין באמצעות WordPress. מסיבה זו אנו מעדיפים באופן אישי את האפשרות הבאה.

ב) HTML לוורדפרס דרך נושא וורדפרס הילד

לדעתנו זה כנראה הדרך הקלה והסבירה ביותר מבחינת מאמץ והשקעה כספית. במקום להשתמש באתר הקיים שלך כנקודת הקפיצה, אתה משתמש במקום זאת מוכן וורדפרס מוכן. לאחר מכן אתה מתאים רק את העיצוב שלו כך שהוא דומה לאתר הישן שלך.

פעולה זו מאפשרת לך לנצל את WordPress באופן מלא תוך שמירה על מראה האתר הישן שלך. לא תצטרך להוסיף תכונות וורדפרס אחר כך. במקום זאת, אתה יכול לבנות על נושא קיים – משהו שהפלטפורמה של וורדפרס מיועדת אליו במפורש.

ג) ייבא תוכן מ- HTML ל- WordPress באמצעות פלאגין

ברור שאם אתה לא מתעקש להשתמש בעיצוב הנוכחי שלך ופתוח לשנות אותו, הדברים הופכים לקלים עוד יותר. במקרה כזה, כל שעליך לעשות הוא להקים אתר, להתקין את העיצוב ולייבא את תוכן ה- HTML שלך. כפי שתראו בהמשך, מדובר בתהליך מהיר מאוד ונטול כאבים.

א) כיצד להמיר ידנית HTML לנושא וורדפרס

אם המטרה שלך היא להתחיל מהתחלה וליצור נושא וורדפרס משלך שדומה לאתר HTML הקיים שלך, התחל מכאן.

אל תדאג אם זה נשמע מאיים, תראה שזה הכל מלבד. רק כמה קבצים ותיקיות, כמו גם העתקה והדבקה, זה כל מה שנדרש.

1. צור תיקיית נושא וקבצי בסיס

הדבר הראשון שעליך לעשות הוא ליצור תיקיית נושא חדשה. אתה יכול לעשות זאת בשולחן העבודה שלך כמו לספריה במחשב שלך. תן שם לכל מה שתרצה שתיקרא לנושא שלך.

לאחר מכן גש לעורך הקוד וצור מספר קבצי טקסט. תן להם את הדברים הבאים:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

אל תעשה איתם עדיין שום דבר, השאר את הקבצים פתוחים בעורך. תצטרך אותם בקרוב.

2. העתק CSS קיים לגיליון הסגנון של וורדפרס

עכשיו הגיע הזמן להכין את גיליון הסגנון של וורדפרס (הקובץstyle.css זה עתה יצרת) כדי להעתיק לתוכו את ה- CSS של האתר הישן. לשם כך, פתח את הקובץ והדבק את הדברים הבאים:

/ *
שם הנושא: עשרים ושלוש עשרה
נושא ה- URI של הנושא: http://wordpress.org/themes/twentythirteen
מחבר: צוות וורדפרס
URI של המחבר: http://wordpress.org/
תיאור: ערכת הנושא של וורדפרס לשנת 2013 מחזירה אותנו לבלוג, ומציעה מגוון רחב של פורמטים של פוסטים, שכל אחד מהם מוצג בצורה יפה באופן ייחודי משלו. פרטי העיצוב שופעים, החל מתכנית צבעים תוססת ותמונות כותרת תואמות, טיפוגרפיה ואייקונים יפים, ומתווה גמיש שנראה נהדר בכל מכשיר, גדול או קטן.
גרסה: 1.0
רישיון: רישיון הציבורי הכללי של GNU v2 ואילך
URI של רישיון: http://www.gnu.org/licenses/gpl-2.0.html
תגיות: שחור, חום, כתום, שזוף, לבן, צהוב, בהיר, עמודה אחת, שתי עמודות, סרגל צד ימין, רוחב גמיש, כותרת מותאמת אישית, תפריט מותאם אישית, סגנון עורך, תמונות מוצגות, מיקרו פורמטים, פוסט פורמטים, תמיכה בשפת rtl, פוסט דביק, מוכן לתרגום
תחום טקסט: עשרים-עשרה

* /

זהו כותרת גליון הסגנון שנקרא (חשוב: אל תשאיר את התגובה/*...*/ תגים החוצה!). מלא כל חלק כזה:

  • שם הנושא – הנה שם הנושא שלך. זה יכול להיות כל דבר שתרצה אבל זה בדרך כלל זהה לשם של תיקיית העיצוב שלך.
  • נושא URI – לרוב תפרסם כאן את דף הבית של הנושא, אך תוכל להשתמש בכתובת האתר שלך.
  • מחבר – זה אתה. שימו כאן שם משלכם או כל מה שתרצו שיקראו לו.
  • מחבר URI – קישור לדף הבית שלך. זה יכול להיות זה שאתה בונה או כל מה שהגיוני.
  • תיאור – תיאור אופציונלי של הנושא שלך. זה יופיע ב backend של וורדפרס.
  • גרסה – גרסת הנושא שלך. מכיוון שאתה לא מפרסם אותו, זה לא ממש משנה. בדרך כלל שמנו כאן 1.0.
  • רישיון, URI רישיון, תגיות – דברים אלה חשובים רק אם אתה מתכנן להגיש את הנושא שלך ל ספריית ערכות נושא של וורדפרס. אתה יכול להשאיר אותם בחוץ במקרה הזה, פשוט כללנו אותם לצורך השלמתם.

לאחר הכותרת, העתק והדבק את ה- CSS הקיים מאתר ה- HTML הסטטי שלך. לאחר מכן, שמור את הקובץ בתיקיית העיצוב החדשה שלך וסגור אותו. הגיע הזמן לעבור לשאר.

3. הפרד את ה- HTML הקיים שלך

לחלק הבא עליכם להבין כי וורדפרס בדרך כלל משתמשת ב- PHP כדי לשלוף מידע ממסד הנתונים שלה. מסיבה זו, עליכם לקצץ את ה- HTML הקיים לחלקים שונים כך ש- CMS יוכל להרכיב אותם כראוי.

למרות שזה נשמע מסובך, כל מה שזה אומר הוא להעתיק ולהדביק חלקים ממסמך ה- HTML למספר קבצי PHP. כדי להדגים זאת טוב יותר, הרכבנו דף דוגמא פשוט שתוכלו לראות בהמשך.

html לדף הדוגמה wordpress

כפי שאתה יכול לראות מדובר בתבנית HTML רגילה הכוללת כותרת עליונה, אזור תוכן, סרגל צד וכותרת תחתונה. הקוד המלווה הוא זה:





כותרת האתר







כותרת האתר

  • פריט nav 1
  • פריט nav 2
  • פריט nav 3

כותרת המאמר

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Aliquam sodales urna non odio egestas זמנית. Nunc vel vehicula ante. אתיאם ביבנדום iaculis libero, eget molestie nisl pharetra בתוך. בסמפר תוצאת est, eu porta velit mollis nec.

כותרת משנה

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Aliquam sodales urna non odio egestas זמנית. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. בסמפר תוצאת est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. פרואין ב- est sed erat facilisis pharetra.

כותרת משנה

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Aliquam sodales urna non odio egestas זמנית. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. בסמפר תוצאת est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. פרואין ב- est sed erat facilisis pharetra.

אם העיצוב שלך שונה, ייתכן שיהיה עליך להתאים במידת מה את השלבים שלהלן. עם זאת, התהליך הכולל נשאר זהה.

ראשית, פתח את הזרם שלך index.html (הקובץ הראשי של אתר ה- HTML שלך). לאחר מכן, עברו על קבצי הוורדפרס החדשים שלכם והעתיקו לתוכם את הדברים הבאים (הדוגמאות למטה הן הסימון שלי):

header.php

הכל מתחילת קובץ ה- HTML לאזור התוכן הראשי (מסומן בדרך כלל עם

או

) נכנס לקובץ זה. בנוסף לכך, ממש לפני היכן שנכתב, העתקה והדבקה . זה חיוני עבור תוספי וורדפרס רבים כדי לעבוד כראוי.




כותרת האתר






כותרת האתר

  • פריט nav 1
  • פריט nav 2
  • פריט nav 3

sidebar.php

כל מה ששייך לקטע

אחרי זה, סיימתם עם index.html ויכול לסגור אותו. שמור את כל הקבצים האחרים בתיקיית העיצוב שלך וסגור אותם למעט header.php ו index.php. יש לך עוד קצת עבודה איתם.

4. “WordPressify” Header.php ו- Index.php

עבור הכותרת, כל שנותר הוא לשנות את הקריאה לגליון הסגנון מתבנית HTML לפורמט וורדפרס. לשם כך, חפש קישור קיים בסעיף קטע. זה אולי נראה כמו משהו כזה:

החלף אותו בזה:

מגניב, עכשיו אתה יכול לשמור ולסגור header.php. ואז פנה אל index.php. זה אמור להיות ריק כרגע. אז ראשית, העתק והדבק את שורות הקוד האלה:




אלה השיחות לקבצים האחרים המכילים את שאר האתר שלך. יתכן שתבחין ברווח שבין השיחה לכותרת העליונה לסרגל הצד. כאן תוסיף הלולאה.

האחרון הוא החלק בוורדפרס בו ה- CMS מוציא תוכן שנוצר בנדנד. זה קריטי אם אתה רוצה ש- WordPress יוסיף תוכן באופן דינמי לדפים שלך שתייבא בהמשך. לשם כך, הדבק את זה כאן מייד אחרי :


עכשיו, שמור index.php קובץ וסגור אותו. כל הכבוד! הנושא הבסיסי שלך מוכן. עכשיו אתה יכול להוסיף אותו לאתר WordPress החדש שלך.

5. צור תמונת מסך והעלה נושא

כעת תוסיף צילום מסך שנושא יחד עם המידע מכותרת גליון הסגנון שלך, ישמש כתצוגה מקדימה של אתר האינטרנט שלך בגיבוי וורדפרס..

לשם כך, פתח את האתר הקיים שלך בדפדפן וצלם צילום מסך בשיטה המועדפת עליך. לאחר מכן, פתח את תוכנת עריכת התמונות לפי בחירתך וחתוך אותה ל 880 × 660 פיקסלים. שמור אותו כ screenshot.png ולהוסיף אותו לתיקיית העיצוב שלך. עכשיו אתה מוכן להעלות את הנושא שלך.

כדי להעלות את הנושא החדש לאתר וורדפרס שלך, יש לך כמה אפשרויות. עם זאת, התנאי הראשון הוא שכל הקבצים שוכנים בתוך תיקיית העיצוב שלך.

האפשרות הראשונה היא ליצור מתוכו קובץ zip. לאחר מכן היכנס לאתר וורדפרס שלך ואז אל מראה> ערכות נושא. כאן, לחץ הוסף חדש בראש ואז העלה נושא.

העלה נושא שעבר המרה

בתפריט הקרוב השתמש בכפתור כדי לדפדף למיקום קובץ ה- zip שלך. סמן אותו ולחץ פתוח, לאחר מכן להתקין עכשיו. בסיום הפעיל את הנושא.

לחלופין, אתה יכול להתחבר לשרת שלך באמצעות FTP (או פשוט לעבור לספרייה המקומית בכונן הקשיח) ולנווט אל wp-content / נושאים. לאחר מכן העלה לשם את תיקיית הנושא שלך (שלא הוסממה). לאחר מכן, הפעל את העיצוב מאותו מקום כמו קודם.

נחמד! חזית האתר החדש שלך אמורה כעת להיראות כמו האתר הישן שלך. כל שנותר כדי להשלים את המעבר מ- HTML ל- WordPress הוא לייבא את התוכן הקיים שלך. נסקור זאת בהמשך כשמדברים על שימוש בערכת נושא קיימת של וורדפרס.

עם זאת, שימו לב כי בעוד שהנושא הבסיסי עובד עכשיו, ישנם דברים נוספים שתוכלו לעשות כדי לשלב את ה- HTML שלכם טוב יותר עם WordPress. זה כולל מה שהופך את הכותרת והתיאור לבלוג שלך לניתנים לעריכה, הוספת אזורי יישומונים, הערות, והרבה יותר. ייתכן שתצטרך להוסיף גם סימון CSS מכיוון שהתוכן אינו חלק מהעיצוב המקורי שלך כמו תמונות.

מכיוון שמדובר בעבודה רבה, אנו באופן אישי אוהבים להשתמש בפתרון שכבר יש לו את כל הפונקציונליות הזו וצריך רק שינוי עיצובי. זה מה שנראה לך בהמשך.

ב) HTML לוורדפרס דרך נושא וורדפרס הילד

אם האמור לעיל נראה אינטנסיבי מדי עבורך, השיטה הבאה עשויה להיות יותר לניהול. זה מאפשר לך לנצל אלפי ערכות נושא וורדפרס קיימות תוך שמירה על העיצוב המקורי שלך.

זה באמצעות נושא שנקרא נושא הילד. ערכות נושא אלה בנויות על גבי נושא אחר (ההורה) שאינן עומדות בפני עצמן אלא רק משנות את נושא ההורה כך שיתאים לצרכים שלך. קל מספיק לעשות זאת למרות שזה דורש מעט עבודות בלש.

1. בחר נושא מתאים

השלב הראשון הוא לבחור נושא מתאים לבסיסו של העיצוב שלכם. לצורך כך, זה עוזר למצוא נושא שקרוב לעיצוב הקיים שלך או להשתמש במסגרת נושא או בערכת נושא המתנע, ששניהם עשויים לעבוד כבסיס לנושאים מותאמים אישית.

בדוק את ה ספריית ערכות נושא של וורדפרס, רשימת הנושאים המדהימים שלנו או התבונן נושאי פרימיום למצוא מועמד מתאים. לאחר חיפושים מסוימים, החלטנו ש- עשרים שתים עשרה הנושא יהווה נקודת התחלה טובה למעבר שלי מ- HTML ל- WordPress. בדרך כלל היינו בוחרים במשהו מעודכן יותר, אבל זה מסתדר עם העיצוב הפשוט שאנחנו עובדים איתו.

לאחר שתבחר, התקן את העיצוב באתר וורדפרס שלך כאילו היית מתקין כל נושא. אין צורך להפעיל אותו. כאמור, זה בדיוק שם כדי לספק לך בסיס לעבוד איתו. השאר קורה בנושא הילד.

2. צור תיקיה חדשה

בדומה לשיטה הקודמת, עבור נושא הילד, אתה צריך ליצור תיקיית נושא. כאן אתה שם את כל הקבצים השייכים אליו.

בעת יצירת ערכות נושא לילד, מקובל לקרוא לתיקיה באותו שם כמו נושא ההורה פלוס -ילד. לכן, מכיוון שנושא הילד שלנו מבוסס על נושא העשרים עשר, אנו מכנים את הספרייה שלו ילד בן עשרים.

לא משנה איזה שם תבחרו, רק וודאו שלא לכלול רווחים מכיוון שזה לא יעבוד ככה.

3. הגדר את גיליון הסגנון

גם נושא הילד זקוק לגליון סגנון. זה יעבוד כמעט זהה לגליון הסגנון שנוצר למעלה. עם זאת, יש לו כותרת מעט שונה והוא יכיל פחות קוד.

נגיע לחלק השני בהמשך. בינתיים, צור את הרגיל style.css ולמקם אותו בתיקיית העיצוב. לאחר מכן הוסף את הדברים הבאים:

/ *
שם הנושא: עשרים וחמש עשרה ילד
URI של הנושא: http://example.com/twenty-fifteen-child/
תיאור: עשרים וחמש עשרה נושא הילד
מחבר: ג'ון דו
URI של המחבר: http://example.com
תבנית: 20
גרסה: 1.0.0
רישיון: רישיון הציבורי הכללי של GNU v2 ואילך
URI של רישיון: http://www.gnu.org/licenses/gpl-2.0.html
תגיות: בהיר, כהה, שתי עמודות, סרגל צד ימין, פריסת תגובה, מוכנה לנגישות
תחום טקסט: עשרים ורבע-ילד
* /

כפי שאתה יכול לראות, זה דומה מאוד לכותרת של גיליון הסגנון בו השתמשת בעבר עם יוצא מן הכלל אחד: הוא מכיל את תבנית תגית.

בחלק זה, עליך לשים את שם הנושא שישמש כהורה. בלעדיו הנושא של הילד לא יעבוד. כדי להימנע מכך, הזן את שם התיקיה של ההורה. אז, עבור עשרים עשר, זה יהיה תבנית: twentytwelve.

4. צור פונקציות .php וירשת סגנונות הורים

רק עם גיליון הסגנון והתיקיה, ניתן כבר להפעיל את נושא הילד. עם זאת, זה לא יועיל הרבה מכיוון שכרגע האתר שלך נראה כמו דף HTML בלי שום סטיילינג.

כדי לשנות את זה, תחילה עליך לרשת את סגנונות ההורה ולשם כך אתה צריך פונקציות. קובץ זה הוא חלק חשוב בכל התקנת וורדפרס ומאפשר לבצע שינויים גורפים באתר האינטרנט שלך.

עם זאת, במקרה זה, תוכלו להשתמש בו רק כדי לקרוא לסטיילינג של ההורה. לשם כך, צור קובץ חדש וקרא אליו פונקציות. הדבר הראשון שתוסיף ממש בהתחלה הוא זה:

עם תג PHP פותח, הקובץ מוכן תיאורטית אך הוא עדיין לא עושה דבר. לכן, בנוסף עליכם להזין זאת:

פונקציה child_theme_enqueue_style () {

$ parent_style = 'סגנון הורה';

wp_enqueue_style ($ parent_style, get_template_directory_uri (). '/style.css');
wp_enqueue_style ('סגנון ילדים'),
get_styleheet_directory_uri (). '/style.css',
מערך ($ parent_style),
wp_get_theme () -> לקבל ('גרסה')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_style');

פיסת קוד זו אומרת לוורדפרס לעבור לספריית התבניות (aka נושא הורה) ולהשתמש בסגנונות הכלולים שם. זה גם מאפשר לשנות את הנושא באמצעות נושא הילד שלך (עוד על כך בהמשך).

5. הפעל את נושא הילד

בשלב זה, נושא הילד מוכן להפעלה.

אתה יכול להוסיף לו צילום מסך כמו בהוראות למעלה אם אתה רוצה. מלבד זאת, אתה יכול לרוכסן אותו ולהוסיף אותו ל- WordPress דרך מראה> ערכות נושא> הוסף חדש> העלאת נושא או פשוט על ידי הוספת התיקיה כפי שהיא wp-content / נושאים.

בשני המקרים, כשאתה מפעיל את הנושא, האתר שלך אמור כעת להיראות בדיוק כמו האב שלו.

6. התאם את העיצוב

כאן מתחילה עבודת הבלשים האמורה. הגיע הזמן לשנות את העיצוב של הנושא הקיים כך שיהיה דומה לאתר ה- HTML המקורי שלך.

לדוגמה, אחד הדברים הראשונים שבולטים הוא שעיצוב הוורדפרס שלנו מוסיף שטח מעל הכותרת התחתונה ומתחת לכותרת התחתונה שאין לאתר HTML שלנו..

HTML ל- wordpress דרך דף דוגמא בנושא נושא הילד

כדי לתקן זאת, אנו יכולים להסתכל באתר HTML עם כלים למפתחי דפדפן למצוא את הסימון אחראי. כאשר אנו עושים זאת אנו נתקלים בכך:

גוף {
שולי: 0;
}

ואז, אנו עושים את אותו הדבר עם נושא הוורדפרס החדש שלי בו אנו מוצאים סגנונות אלה:

body .site {
שוליים עליונים: 48 פיקסלים;
שוליים עליונים: 3.428571429rem;
שוליים-תחתון: 48 פיקסלים;
שוליים-תחתיים: 3.428571429rem;
}

המטרה שלי היא כעת להחיל את הסטיילינג מאתר ה- HTML לנושא הוורדפרס. במקרה זה, אנו יכולים להשיג זאת על ידי הוספת הדברים הבאים לנושא הילד שלי style.css:

body .site {
שולי: 0 אוטומטי;
}

לאחר שמירה, הנושא של וורדפרס מיושם עליו הסגנונות החדשים:

html ל- wordpress דרך דף הדוגמה בעריכת נושא הילד

הסיבה לכך היא שכל דבר שתוסיף לגליון הסגנון של נושא הילד, עובר על הסגנונות בהורה. עם זאת, שאר הסימון נשאר על כנו, כך שתוכל רק לשנות את הדברים הרלוונטיים.

בנוסף, אם אתה משתמש בתבנית HTML5 כמתחיל ונושא וורדפרס מודרני כהורה שלך, הרבה מהסימון הבסיסי יתאים, מה שהופך את חייך לקלים בהרבה.

אתה יכול לעשות הרבה יותר עם נושאים של ילדים שאתה יכול ללמוד כאן. לאחר שתסיים להתאים את העיצוב, הגיע הזמן לייבא את התוכן שלך. בואו נגיע לזה עכשיו.

ג) ייבא תוכן מ- HTML ל- WordPress באמצעות פלאגין

לבסוף, ברשימת המעבר מ- HTML ל- WordPress משתמש נושא קיים כפי שהוא ופשוט מעביר את התוכן שלך מאתר ה- HTML אליו. זו הדרך הפשוטה ביותר - כל שעליכם לעשות הוא להתקין ולהפעיל את הנושא שבחרתם (אנו מניחים שאתם יודעים לעשות זאת כבר עכשיו) ואז עקבו אחר השלבים שלהלן..

אגב, למרות שתהליך זה אינו קשה במיוחד, ישנם דברים שיכולים להשתבש. מסיבה זו, וודא שאתה מגבה את אתר וורדפרס שלך לפני שתעבור איתו.

1. התקן את התוסף הייבוא

הדבר הראשון שעליך לעשות הוא להתקין את התוסף ייבוא ​​HTML 2. הדרך הקלה ביותר להשיג זאת היא ללכת אליו תוספים> הוסף חדש ולחפש אותו לפי שם. כשאתה מוצא אותו ברשימה (ייתכן שהוא נמצא למטה לתחתית), לחץ על להתקין עכשיו. הפעל אותו כשתסיים.

html לתוסף ייבוא ​​wordpress

2. הכן את הייבוא

כדי לייבא מספר דפים בו זמנית, עליכם להעלות אותם לאותו שרת שבו התקנת וורדפרס שלכם. התוסף יציע משהו כמו html-קבצים לייבוא  שם התיקיה, אך אתה יכול לבחור מה שאתה רוצה. רק דאג לזכור את שם הנתיב.

כפי שתראו בהמשך, תוכלו גם לייבא דפים בודדים בזה אחר זה. עבור כל אחת מהשיטות, עבור אל WordPress ו- הגדרות> ייבוא ​​HTML. נעבור כעת על ההגדרות הבסיסיות ביותר. אם אתה זקוק למידע נוסף או אם דבר שאינו ברור, עיין ב- מדריך למשתמש הרשמי.

קבצים

html לקבצי ייבוא ​​wordpress

קבע את התצורה של מסך זה באופן הבא:

  • מדריך לייבוא - הזן את הנתיב שאליו בדיוק העתקת את הקבצים הקיימים שלך.
  • כתובת אתר ישנה - משמש להפניות מחדש. הזן את כתובת האתר הישנה שלך. נעסוק בזה שוב בהמשך מאמר זה.
  • קובץ ברירת מחדל —קובץ ברירת המחדל עבור ספריות באתר הישן, בדרך כלל index.html.
  • סיומות קבצים לכלול - הרחבות הקבצים שברצונך לייבא.
  • ספריות להוציא - אם יש לך ספריות באתר הישן שאינך רוצה לייבא, הזן אותן כאן.
  • שמור שמות קבצים - כדי שהפלאגין ישתמש אוטומטית בשמות הקבצים שלך ככתובת האתר החדשה, סמן את התיבה הזו. זה הגיוני אם הכותרות שלך ארוכות מאוד כי בדרך כלל היבואן ישתמש בהן כדי ליצור את הקליע.

תוכן

תחת תוכן עליך להגדיר את תג ה- HTML המכיל את תוכן האתר שלך.

html לתוכן ייבוא ​​wordpress

לשם כך, בחר באפשרות תג HTML בראש. לאחר מכן הגדר את התג בשלושת השדות הבאים. לדוגמה, אם התוכן שלך כלול בתג שנקרא

, המידע שתזין יהיה div, מזהה ו עיקרי.

ההגדרות האחרות בדף זה צריכות להיות בעלות הסבר עצמי ולאפשר לכם לייבא תמונות, מסמכים, לעדכן קישורים פנימיים ועוד.

כותרת ומטא נתונים

html לכותרת יבוא ומטא נתונים של wordpress

חלק זה דומה לחלק התוכן שלפני. עם זאת, מדובר בכותרות עמודים. בהתחלה, עליך לספר לתוסף כיצד מסמנים כותרות בתבנית ה- HTML שלך כך שהוא יכול לייבא אותם למקום הנכון.

בנוסף, אתה יכול לסנן דברים מיותרים כמו כותרת האתר כפי שמוצגים לעתים קרובות על ידי ערכות נושא של WordPress כברירת מחדל. אם הכותרות שלך שוכנות בתוכן, אתה יכול גם לומר ליבואן למחוק אותם כדי שלא ייכללו פעמיים.

מה שחשוב זה שתחליטו אם לייבא את התוכן הישן שלכם כמו פוסטים או דפים. השאר די מסביר את עצמך ומאפשר לך להגדיר הגדרות וורדפרס לדפים חדשים.

שדות מותאמים אישית

html לייבוא ​​Wordpress שדות מותאמים אישית

אם יש לך נתונים שצריכים לייבא לשדות מותאמים אישית, אתה יכול להגדיר אותם כאן.

קטגוריות ותגים

html לקטגוריות ותגים לייבוא ​​wordpress

כאן תוכלו להקצות קטגוריות, תגיות ופורמטי פוסט לתוכן המיובא שלכם. התוסף יציג את הטקסונומיה הקיימת באתר שלך כדי להקל על צעד זה.

כלים

כלים לייבוא ​​HTML ל- WordPress

מסך זה מציג מספר כלים שימושיים לייבוא ​​בהצלחה מ- HTML ל- WordPress.

3. התחל לייבא

לאחר שתסיים, שמור את ההגדרות. זה יאפשר ייבא קבצים כפתור. לחץ עליו כדי להתחיל.

HTML לייבוא ​​וורדפרס

(הערה: אתה יכול גם להגיע לכאן דרך כלים> יבוא ואז קוטפים הפעל יבואן תחת HTML אפשרות.)

לאחר מכן בחר אם לייבא ספריית קבצים או קובץ בודד (עליך לדפדף אליו) ואז לחץ על שלח. לאחר מכן התוסף יעבוד לעבודה.

לאחר שתעשה זאת, עליך לקבל את כל התוכן הקיים באתר וורדפרס שלך ולעצב אותו לפי הנושא החדש. לחלופין, אם הלכת לאחד מהנתיבים האחרים, האתר שלך אמור להיראות זהה לאתר HTML הקודם שלך. נעשה בצורה טובה!

שלבים נוספים

אם אתם מתכננים לפרוס את אתר וורדפרס באותו מקום בו היה אתר ה- HTML הסטטי בעבר, יש עוד כמה דברים לעשות לפני שתסיימו.

הראשון הוא לבדוק את כתובות האתרים של הפוסטים והדפים המיובאים החדשים שלך כדי לוודא שהם ידידותיים למנועי חיפוש (כלומר כלול את מילות המפתח שאתה רוצה לדרג עבורן). זה פשוט מאוד - פשוט עבור לדף או לפרסם ולהסתכל בכתובת האתר שמתחת לכותרת.

בדוק Permalinks לאחר HTML לייבוא ​​WordPress

כדי לשנות את זה, לחץ על ערוך בצד ימין, שנה לכתובת האתר לבחירתך והקש בסדר.

דבר שני הוא ליישם הפניות מכתובות האתרים הישנות לכתובות החדשות. ככה, לא תפסיד בערך SEO הקיים.

אם מילאת את כתובת האתר הישנה בתוסף ה- HTML, היא תיצור עבורך את קוד ההפניה. אתה יכול להעתיק ולהדביק את זה בקובץ.htaccess שנמצא בשרת שלך (בדרך כלל בספריית השורש).

אתה ניגש אליו דרך FTP, עם זאת, ייתכן שיהיה עליך לאפשר הצגת קבצים מוסתרים מכיוון שאינו גלוי כברירת מחדל. ואז ערוך .htaccess והזן את הכללים.

שימו לב שזה עובד רק אם השארתם את כתובות האתרים ללא שינוי. אם אינך צריך וצריך להגדיר הפניות מחדש מותאמות אישית, השתמש ב- תוסף הפניה מחדש. זהו פיתרון מאוד נוח שעוקב אחר כל פעם שמישהו נוחת בכתובת אתר לא קיימת באתר שלך. ככה תוכלו ליישם הפניות גם עבור קישורים אלה.

האם עברת בהצלחה מ- HTML ל- WordPress?

וזה הכל. בדיוק למדת כיצד להמיר אתר HTML סטטי לוורדפרס. כתוצאה מכך, הפכת להיות חלק מאחת הקהילות הגדולות באינטרנט וקיבלת גישה לאלפי משאבים כדי להפוך את האתר שלך אפילו טוב יותר.

תלוי באיזה פיתרון בחרת למעלה, כבר התרשמת כיצד WordPress עובדת. מכאן והלאה, די קל להסתעף ולצלול לעומק ביצירת אתרים עם פלטפורמת הוורדפרס. אם אתה זקוק לעזרה נוספת בתחום זה, באתר זה יש המון ממנו. אתה יכול ללמוד כיצד:

  • התאם אישית את וורדפרס צעד אחר צעד
  • העבר את האתר שלך מ- HTTP ל- HTTPS
  • הוסף גופנים מותאמים אישית לוורדפרס
  • להאיץ את אתר וורדפרס שלך
  • הוסף טופס יצירת קשר לאתר וורדפרס שלך

פרט לכך, אנו מאחלים לך בהצלחה עם אתר הוורדפרס החדש שלך שהוטבע. אנו מקווים שתיהנו מאוד לעבוד עם WordPress כמונו.

העברת את האתר שלך מ- HTML ל- WordPress? איך הייתה החוויה שלך? יש טיפים להוסיף? אנא הודע אותנו בסעיף ההערות שלהלן.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map