ממשק שינוי 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 !

10 תגובות על הפוסט “ממשק שינוי css”

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

להגיב ↓

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

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

להגיב ↓

יש לי שתי שאלות:

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

להגיב ↓

א. אני מלמדת קורס בפקולטה לעיצוב תקשורת חזותית. החבר'ה לומדים HTML ו-CSS כשהמטרה הסופית היא לדעת CSS וליישם ובעיקר לדעת לקרוא HTML.
ב. המטרה העיקרית של זה היא לאפשר שינוי של ה-CSS של התבנית האמורה. כאשר משתמשים במערכת wordpress MU השליטה של המשתמש בעיצוב מוגבלת לבחירת תבנית והאפשרויות אותן נותנת התבנית, במקרה זה נתתי אפשרות לערוך את ה-cssשל התבנית ולכן לקבל שליטה מלאה על העיצוב.
"העורך" הוא פשוט textarea ללא אפשרויות מיוחדות.

להגיב ↓

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

להגיב ↓