מאמר המלך

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

טרופיקל פיט

נעלי טרופיקל פיט ישראל

טרופיקל פיט היא חברת יבוא לנעלי נוחות מברזיל.

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

נעם טיפול במגע

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

פניה זהר בית ספר להורות

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

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

מנחם ההנדימן

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

ממד ירושלים הנדסה

ממ"ד ירושלים – לבטיחות ואיכות חיים

חברת ממ"ד ירושלים מספקת פתרונות לתוספת ממ"ד בבניינים קיימים.

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

PClub

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

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

מצפת באהבה

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

Dstrux

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

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

מירי ליטווק סופרת

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

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

אסנת טיפול בעזרת בעלי חיים


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

רחובות הנהר


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


Marketing Shooters


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


נוגיתה


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



קמפיינים שהפקנו לנוגיתה

מרגלית קונשטוק


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



מדריך הוספת ווידג'ט מ- א' עד ת'

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

יצירת הווידג'ט נעשת בקובץ functions.php שלכם (כרגיל, עדיף לשים בתבנית הבת שלכם). פתחו את הקובץ במעבד התמלילים האהוב עליכם והוסיפו לו את הקוד הבא (הסברים בתוך הקוד)

// create home widgets
    register_sidebar( array(
        //שם הווידגט
                          'name'          => __( 'The Home Widget 1' ),
        //תיאור שיופיע באזור עריכת הווידגט
                          'description'   => __( 'אזור ראשון בדף ראשי' ),
        //מזהה יחודי של הווידגט חייב להיות באותיות קטנות ללא רווחים
                          'id'            => 'a-home-widget-1',
        //מרקאפ שיופיע לפני הטייטל של הווידגט
                          'before_title'  => '

', //מרקאפ שיופיע אחרי הטייטל של הווידגט 'after_title' => '

', //מרקאפ שיופיע לפני הווידגט 'before_widget' => '
', //מרקאפ שיופיע אחרי הווידגט 'after_widget' => '
' ) );

קוד זה ייצר ווידג'ט חדש באזור הווידג'טים, ניתן לערוך את הווידג'ט באזור הווידג'טים תחת "עיצוב" > "ווידג'טים"
לווידג'ט שיצרנו ניתן להוסיף איזה תוכן שתרצו, שימו לב שהקוד שיצרנו מותאם לווידג'ט מסוג טקסט שמציג גם כותרת וגם תוכן.
wordpress widgets location

 wordpress new widget
כעת אנחנו צריכים להוסיף קריאה לווידג'ט, בתוך קובץ sidebar-my.php הוסיפו את הקריאה לווידג'ט באופן הבא:



וכל מה שנשאר זה להוסיף קריאה לסיידבר מתוך דף התבנית שלכם

    
    
 

בכדי להוסיף סגנון לווידג'ט שלכם אתם יכולים להשתמש בIDים שהענקנו לווידג'ט ביצירה שלו(באזורי 'before_widget'ו 'after_widget')

שיהיה בהצלחה שאלות מענות או טענות אפשר להוסיף בהערות למטה.

רספונסיבי או מוביילי מה זה משנה?

שוק המובייל בישראל

כאשר 99.8% מהישראלים מחזיקים טלפון נייד ו 57% משוק המובייל בעלי  סמארטפונים קל להבין את חשיבות חווית המשתמש הנייד בתכנון האתר שלכם.

 

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

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

responsive design vector
אז עיצוב רספונסיבי או אתר מוביילי?

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

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

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

לסיכום

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

 

איך מציגים שורטקוד בסרגל צד

התקנתם תוסף חדש ואתם רוצים להוסיף את השורטקוד שלו לווידג'ט בסרגל הצד? אין בעיה! רק צריך לתת לווידג'ט טקסט הבסיסי את היכולת להריץ שורטקודים.

1. נווטו אל תבנית הבת שלכם ופתחו את functions.php בעזרת מעבד התמלילים האהוב עליכם והוסיפו פילטר do_shortcode ל widget_text באופן הבא:

// Use shortcodes in text widgets.
add_filter('widget_text', 'do_shortcode');

2add text widget. שמרו וכנסו אל עיצוב > ווידג'טים שם הוסיפו את ווידג'ט הטקטס אל סרגל הצד שברצונכם להציג בו  שורטקוד.

 

 

 

 

 

 

3. כעת כל מה שנותר זה להוסיף את השורטקוד לתוך ווידג'ט הטקסט שבסרגל הרצוי

do-shortcode

על התקפות כוח גס ואיך להימנע מהן

dictionary attackהתקפות כוח גס (Brute Force Attacks) הן התקפות פשוטות וקלות להפעלה ונדמה שהמון מתקפות על אתרים מתבצעות בניגוד להאקינג מסורתי שמחפש חולשות בתוכנה ומנצל אותן לטוב או לרע (להאקינג או קראקינג) התקפות כוח גס מתבצעת כשתוקף מוצא טופס כניסה לאתר ומנסה אפשרויות בכדי לנחש את שם משתמש והסיסמא בעזרת שילובים של האלפאבית או בעזרת מאגר זוגות סדורים של סיסמה ושם משתמש (Dictionary attack) עד שימצא זוג שעושה את העבודה.
דמיינו לעצמכם שאתם בכניסה למועדון, השומר מאחורי הדלת שואל אתכם לשמכם בכדי לאמת אישור כניסה ברשימה שלו ואתם עומדים עם ספר טלפונים של ישראל ועוברים איתו שם אחרי שם עד שמצאתם שילוב שעובד. כך בערך התקפות כוח גס עובדות בגסות ובלי יותר מדי תחכום אבל אם לא נערכים אליהן מראש בסופו של דבר התוקף ימצא את השלוב הנכון. אז מה עושים כשילדי סקריפטים תוקפים לכם את wp-login כאקט מחאה גאופוליטי? יש כמה צעדים מונעים שאפשר לקחת בכדי להקשות מאוד על תוקף מהסוג הזה לפגוע בכם או לתפוס אותו בזמן.

1. עקבו אחרי נסיונות כניסה שנכשלו.

אין סיבה שלא ותמיד חשוב שכן, יש המון פלאגינים שמנגישים את קבצי הלוג כניסה מנסיון אני ממליץ על התוסף login-security (ע"י Tony Archambeau) אבל אם אתם נינג'ות רשת ורוצים לממש את זה בעצמכם אז ניתן להשתמש בהוק wp_login

Login-Security-webene-co-il

2. הסירו את חשבון האדמין שלכם

שימוש בשם משתמש כמו admin עושה לתוקף חצי מהעבודה, אין סיבה שיהיה לכם שם משתמש כזה webene-co-il-usersואם יש לכם אחד אז רוצו למחוק אותו – לכו למשתמשים –> כל המשתמשים, במידה ואין לכם משתמש שונה מאדמין אז צרו אותו עם הרשאות ניהול מלאות, היכנסו בעזרתו ומחקו את חשבון האדמין שלכם.

3. השתמשו בסיסמא חזקה

RANDOM-ORG-Password-Generator 2014-05-01 01-16-50– יש המון גנרטורים של סיסמאות, לכו לגוגל ומצאו לכם אחד שעובד וצרו בו סיסמא שעונה על כל הפרמטרים האלא:

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

דוגמא ליצרן סיסמאות שעובד יש באתר random

 

4. הגבילו גישה לwpconfig

הגבילו כניסה לwpconfig הוסיפו ב .httaccess הגבלת גישה לקובץ

# protect wpconfig.php


order allow,deny
deny from all

5. העבירו את עמוד הלוגאין מכתובת ברירת המחדל

-webene-co-il-rename-wp-configהתקנה דיפולטיבית של וורדפרס שמה את טופס הכניסה תחת wp-login ומצביעה אליו בכניסה לא של אדמין לwp-admin.
המצב הזה מקל על תוקף מאוד שלא צריך עכשיו שום מאמץ בכדי לגלות היכן הדלת שלכם נמצאת,
שינויי כתובת הכניסה לכתובת מותאמת אישית יקשה על תוקף לנחש היכן המטרה נמצאת.
מנסיון השימוש בפלאגין Rename wp-login.php עושה את העבודה בלי סיבוך מיותר

6 הסירו את גרסאת וורדפרס מהאתר שלכם:

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

/**
 * remove version number from css and scripts
 */
function remove_wp_version_strings( $src ) {
	global $wp_version;
		parse_str(parse_url($src, PHP_URL_QUERY), $query);
	if ( !empty($query['ver']) && $query['ver'] === $wp_version ) {
		$src = remove_query_arg('ver', $src);
	}
	return $src;
}
add_filter( 'script_loader_src', 'remove_wp_version_strings' );
add_filter( 'style_loader_src', 'remove_wp_version_strings' );

/**
 * remove version number from the_generator
 */
function remove_wp_version() {
return '';
}
add_filter('the_generator', 'remove_wp_version');

6. אל תשכחו לגבות

לא משנה מה קורה, תדאגו שיהיה לכם גיבוי של כל הוורדפרס (מסד נתוניםוגם את קבצי הוורדפרס)

בהצלחה!

ואם יעלו לכם שאלות, אל תתבישו לשאול למטה

הוספת סקריפטים או גליון סגנונות חדש לתור טעינה בוורדפרס

בכדי להוסיף בוורדפרס CSS או סקריפטים לתור טעינה בקצה הקדמי של וורדפרס מומלץ להשתמש בהוק בwp_enqueue_scripts לפי הדוגמא הבאה:

function theme_name_scripts() {
	wp_enqueue_style( 'my-css', get_theme_root_uri() . '/themeDir/my.css' );
        wp_enqueue_script( 'my-js', get_theme_root_uri() . '/themeDir/my.js' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

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

הוספת קבצי ווקטור לוורדפרס

קבצי SVG או בשמם המלא Scalable Vector Graphics הם קבצי XML המשמשים לתיאור עצמים גרפיים יתרונם על קבצי פיקסל הוא שניתן להרחיב לכל מידה מבלי לפגוע באיכות התמונה.

דוגמא לקוד SVG יהיה השורה הזו שתיצור עיגול:


  

 

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

// allow SVG uploads 
add_filter('upload_mimes', 'custom_upload_mimes'); function custom_upload_mimes ( $existing_mimes=array() ) { // Add file extension 'extension' with mime type 'mime/type' $existing_mimes['svg'] = 'mime/type'; // and return the new full result return $existing_mimes; }

מדריך וידיאו עריכת גליון סגנונות וורדפרס

איך עורכים CSS וורדפרסאיך עורכים CSS באתר וורדפרס

מה עושה CSSבעזרת  CSS או בעברית "גיליונות סגנון מדורגים" (מדורגים בגלל ההירככיה) ניתן לשלוט במאפיינים כגון מיקום, גודל צבע, שקיפות, פונטים ועוד של אלמנטי HTML, העריכה נעשת באמצעות שפת תגיות. בקובץ CSS ויוצרת קוד קריא יותר עם התאמה לכל דפדפן ואפשרויות עריכה גלובליות של אלמנטים חוזרים לפי ID.

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

 

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

<div>הוא תגית HTML שימושית שיכולה לקבל המון פרמטרים שונים, עליהם נרחיב במדריכונים אחרים.

 

 

 

 

שינויי CSS צבע וורדפרסאת שם ה- ID שהענקנו לDIV נעתיק לקובץ ה- CSS של תבנית הבת שלנו וניצור שם אלמנט CSS חדש שעונה לשמו. בכדי לבחור את ה- ID נשתמש בסלקטור ה- ID, הוא הסימן סולמית # אחריו בלי רווחים נוסיף את שם ה- ID שיצרנו (test) ובתוך סוגריים מסולסלים את הצבע וערכו.

 

 

11 וחצי קוד CSS

 

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

 

13 זוהי בדיקה בצבע כחול

 

כפי שאתם רואים, אלמנט הCSS שערכנו מתנהג כפי שביקשנו.

 

אם יעלו לכם שאלות אתם מוזמנים לכתוב לנו למטה ואנחנו נענה ונסביר.

תבנית בת וורדפרס

עדכון: <מדריך הוידיאו יעלה מחדש בימים הקרובים>

 

 

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

 

 

~

CSS 1 תיקיה אחת

 

אז דרישות המינימום לתבנית בת זה יצירת קובץ CSS בפורמט ספציפי שנמצא בתיקיה תחת wp-content –> themes, פשוט וקל, תיקיה אחת וקובץ אחד.

 

תיקיה אחת סטייל אחד

 

 

תבנית בת וורדפרס

1. צרו תיקיה חדשה בשם twentythirteen_child בתוך תיקית wp-content –> themes

 

2. צרו קובץ בשם style.css והעתיקו לתוכו את התוכן הבא:


/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Thirteenn Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentythirteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-thirteen-child
*
@import url("../twentythirteen/style.css");

/* =Theme customization starts here ————————————————————– */

3. היכנסו לתוך פאנל הניהול והפעילו את ערכת הבת החדשה שנוצרה.

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

מה עושה תבנית בת?

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

 

אז מה הפורמט של קובץ הסטייל?

בעיקרון, השורות היחידות שחייב שיהיו הם theme name ו template כשהשם הוא שם התצוגה והתבנית הוא שם התיקיה של תבנית האם.

 

work is play at ene

 

שיהיה בהצלחה ואנחנו נשמח לעזור בכל שאלה שתעלה.