ממשק שינוי css
מאת חנית כהן | נשלח 1.06.2008 | נושאים אוכל, וורדפרס
כחלק מהקורס אותו אני מלמדת ב-HIT נוצר צורך לתת לסטודנטים יכולת לשנות CSS של תבנית ועל ידי כך למעשה לעצב בעצמם תבנית (מעל בסיס sandbox).
הרמתי עבור הסטודנטים מערכת worpress-mu שתשרת את כולם, התקנתי תבנית sandbox ואז הגעתי לבעיית שינוי התבנית.
חיפושים ברשת הובילו אותי למספר תוספים שכולם התגלו כחסרי תועלת עבורי, על כן החלטתי לתור את הנושא לבד.
הבסיס הרעיוני לפתרון הוא פשוט:
- הוספת ממש עריכה בסיסי לתבנית דרך דף אפשרויות
- הממשק הנ”ל ישמור את המידע לקובץ המקושר ישירות לבלוג הספציפי
- התבנית תשלוף את הקובץ ותשתמש בו כקובץ css
גם המימוש לא היה מסובך במיוחד, הוספתי לקובץ functions.php את המידע הבא:
החלטתי לשמור את קבצי הסגנון החדשים עבור כל בלוג בספריית הקבצים של הבלוג, ועל כן הפונקציה להוספת ה-CSS החדש ל-header נראית כך:
function mytheme_wp_head() {
global $blog_id;
echo "\n<link href='".get_bloginfo('url')."/wp-content/blogs.dir/".$blog_id."/files/style.css"."' rel='stylesheet' type='text/css' />\n";
}
הוספת ממשק הניהול התפצל לשתי פונקציות. הראשונה אחראית על שמירת המידע שהוזן בממשק וכן על הוספת תפריט לדף החדש:
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');
}
השניה אחראית על הצגת דף הממשק למשתמש:
function mytheme_admin() {
global $themename, $shortname, $options;
global $blog_id;
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong> המידע נשמר בהצלחה.</strong></p></div>';
$fname = ABSPATH."wp-content/blogs.dir/".$blog_id."/files/style.css";
if (file_exists($fname))
$content = file_get_contents($fname);
else
$content = '';
?>
<div class="wrap">
<h2><?php echo $themename; ?> CSS</h2>
<form method="post">
<textarea id=cssdata name=cssdata rows="20" cols="80" dir=ltr align=left><?=$content?></textarea>
<p class="submit">
<input name="save" type="submit" value="שמירת שינויים" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<? }
עכשיו רק נותר לדאוג שכל העסק הזה אכן יפעל:
add_action('wp_head', 'mytheme_wp_head');
add_action('admin_menu', 'mytheme_add_admin');
נהניתם מהפוסט ? כדאי להרשם לעדכוני RSS ולקבל הכל ישירות.
שמי חנית כהן, אני בת 32 ואשת מחשבים משנת 93.
עבודה יפה מאוד. אני גם אוהב את התוסף הזה להצגת קוד - הוא נראה יותר טוב מה-editor שלי.
תודה רבה, צריך להוסיף עוד שכבה אחת כדי להפוך את זה לשימושי להמונים - הטקסט צריך לעבור בדיקה מאסיבית לפני ההזנה, את זה אני מתכננת לעשות בעתיד ואז אולי נכול לשלב את העסק גם בבלוגלי.\
אשר לתוסף, גם אני אוהבת אותו, בעיקר כי הוא נותן מספור שורות וקוד צבעוני (כמו שצריך).
מדובר בתוסף SyntaxHighlighter, עשיתי עליו רק התאמה אחת קטנה - דאגתי ליישר לשמאל (הוא מניח שזו ברירת המחדל של התבנית).
יש לי שתי שאלות:
א. איזה קורס את מלמדת ב-HIT שבו לומדים להתעסק עם CSS-ים ותבניות? אני שואלת את זה מהכיוון של מחסור במעצבי ווב שיודעים להתעסק עם התחום. אני מהצד של המחפשים.
ב. בתור אחת שלא דוברת PHP-ית מקומית - מה התוצר של זה בעצם? עמוד שבו ניתן לערוך קוד בצורה נוחה בניגוד לגוש הטקסט הקיים היום?
א. אני מלמדת קורס בפקולטה לעיצוב תקשורת חזותית. החבר’ה לומדים HTML ו-CSS כשהמטרה הסופית היא לדעת CSS וליישם ובעיקר לדעת לקרוא HTML.
ב. המטרה העיקרית של זה היא לאפשר שינוי של ה-CSS של התבנית האמורה. כאשר משתמשים במערכת wordpress MU השליטה של המשתמש בעיצוב מוגבלת לבחירת תבנית והאפשרויות אותן נותנת התבנית, במקרה זה נתתי אפשרות לערוך את ה-cssשל התבנית ולכן לקבל שליטה מלאה על העיצוב.
“העורך” הוא פשוט textarea ללא אפשרויות מיוחדות.
א. את לא מאמינה כמה זה נדרש וכמה זה חסר - ידע כזה אצל מעצבים.
ב. הבנתי, אני פשוט לא עם ה-MU ומכירה את העריכה האפשרית דרך ה-DASHBORAD ומשתמשת בדרך כלל בעורך חיצוני.
השארת תגובה