ממשק שינוי css

כחלק מהקורס אותו אני מלמדת ב-HIT נוצר צורך לתת לסטודנטים יכולת לשנות CSS של תבנית ועל ידי כך למעשה לעצב בעצמם תבנית (מעל בסיס sandbox).
הרמתי עבור הסטודנטים מערכת worpress-mu שתשרת את כולם, התקנתי תבנית sandbox ואז הגעתי לבעיית שינוי התבנית.

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

הבסיס הרעיוני לפתרון הוא פשוט:

  • הוספת ממש עריכה בסיסי לתבנית דרך דף אפשרויות
  • הממשק הנ"ל ישמור את המידע לקובץ המקושר ישירות לבלוג הספציפי
  • התבנית תשלוף את הקובץ ותשתמש בו כקובץ css

גם המימוש לא היה מסובך במיוחד, הוספתי לקובץ functions.php את המידע הבא:

החלטתי לשמור את קבצי הסגנון החדשים עבור כל בלוג בספריית הקבצים של הבלוג, ועל כן הפונקציה להוספת ה-CSS החדש ל-header נראית כך:
[sourcecode language='php']
function mytheme_wp_head() {
global $blog_id;
echo "\n \n";
}
[/sourcecode]

הוספת ממשק הניהול התפצל לשתי פונקציות. הראשונה אחראית על שמירת המידע שהוזן בממשק וכן על הוספת תפריט לדף החדש:
[sourcecode language='php']
function mytheme_add_admin() {
global $themename, $shortname, $options;
global $blog_id;

if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
$content = stripslashes($_POST['cssdata']);
$fname = ABSPATH."wp-content/blogs.dir/".$blog_id."/files/style.css";
$f = fopen($fname, "w") or die("can't open file $fname");
fwrite($f, $content);
fclose($f);

header("Location: themes.php?page=functions.php&saved=true");
die;
}
}
add_theme_page("שינוי עיצוב", "שינוי עיצוב", 'edit_themes', basename(__FILE__), 'mytheme_admin');

}
[/sourcecode]

השניה אחראית על הצגת דף הממשק למשתמש:[sourcecode language='php']
function mytheme_admin() {
global $themename, $shortname, $options;
global $blog_id;
if ( $_REQUEST['saved'] ) echo '

המידע נשמר בהצלחה.

';
$fname = ABSPATH."wp-content/blogs.dir/".$blog_id."/files/style.css";
if (file_exists($fname))
$content = file_get_contents($fname);
else
$content = ";
?>

CSS

[/sourcecode]

עכשיו רק נותר לדאוג שכל העסק הזה אכן יפעל:[sourcecode language='php']
add_action('wp_head', 'mytheme_wp_head');
add_action('admin_menu', 'mytheme_add_admin');
[/sourcecode]

025 ממשק שינוי css נהניתם ? הרשמו לעדכוני RSS !

הוספת תפריט ניווט עליון לתבנית

בעקבות שאלה בקבוצת הדיון של וורדפרס בעברית.

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

1
<?php wp_list_pages('title_li=&depth=1');?>

כאשר במקרה הזה דאגנו שיוצגו דפים ללא תתי דפים (depth=1) ולא תופיע כותרת לרשימה(title_li=).

צריך לזכור לעטוף את הקוד בתגיות רשימה כלומר:

1
2
3
<ul>
            <?php wp_list_pages('title_li=&depth=1');?>
</ul>

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

1
<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li>

כך שהקוד כולו נראה כך:

1
2
3
4
<ul #id=menu>
        <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li>
        <?php wp_list_pages('title_li=&depth=1');?>
</ul>

הקוד שיש לנו כעת מייצר רשימת דפים בבלוג הכוללת את דף הבית אך נראית כרשימה רגילה קרי:

את הקוד הזה צריך לשים בקובץ הנכון בהתאם לצרכי העיצוב שלנו. בד"כ זה יהיה בקובץ header.php

על מנת להפוך את העסק לסרגל ניווט אופקי צריך להוסיף קצת הגדרות CSS (בקובץ style.css של התבנית):

ראשית נגדיר שלרשימה שלנו אין תבליטים:

1
2
3
#menu ul {
    list-style: none;
}

עכשיו נגדיר שאנחנו רוצים את הרשימה כאופקית ולא אנכית:

1
2
3
#menu li {
    display: inline;
}

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

1
2
3
4
5
#menu a
{
    padding:8px 16px;
    text-decoration: none;
}

זה הכל – קיבלנו את התוצאה הבאה:
pages-nav.png

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

1
2
3
4
5
6
7
8
9
10
11
#menu a:hover,
#menu a:active,
#menu li.current_page_item a:link,
#menu li.current_page_item a:visited,
#menu li.current_page_item a:hover,
#menu li.current_page_item a:active
{
    background:#456;
    color:#fff;
    border:0;
}

אבל אלו כבר משחקי עיצוב על הבסיס הקיים.

בהצלחה

025 הוספת תפריט ניווט עליון לתבנית נהניתם ? הרשמו לעדכוני RSS !

זהירות, הפיד לא עובד !

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

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

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

חצי דקת השקעה ואתם רשומים לפיד של עצמכם – ככה מגלים בעיות בזמן :-)

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

025 זהירות, הפיד לא עובד ! נהניתם ? הרשמו לעדכוני RSS !