GeneratePress სწრაფი WordPress შაბლონი: მსუბუქი, საპასუხო, მოქმედი, უფასო. ძირითადი ხმის მიცემის უსწრაფესი საპასუხო WordPress თემა უმარტივესი WordPress თემა

უბრალოდ გახსოვდეთ, რომ WordPress აწარმოებს რამდენიმე კლასს, რომელიც უნდა იყოს წარმოდგენილი სტილის ფურცელში. მაგალითად კლასები გასწორება ცენტრში, გასწორება მარცხნივ და გასწორებაემსახურება სურათების გასწორებას და ელემენტების დაბლოკვას და ისინი უნდა იყოს ჩართული თქვენს სტილის ფურცელში (შეგიძლიათ დააკოპიროთ ნაგულისხმევი თემის სტილის ცხრილიდან):


.გასწორება,
div.aligncenter (
ჩვენება: ბლოკი;
ზღვარი-მარცხნივ: ავტო;
margin-right: auto;
}
გასწორება მარცხნივ (
float: მარცხენა;
}
.გასწორება (
float: მარჯვნივ;
}

შემდეგი კლასები გამოიყენება სურათების გასასწორებლად, რომლებსაც აქვთ წარწერები (შეიძლება დააკოპიროთ ნაგულისხმევი თემიდან, მოგვიანებით, საჭიროების შემთხვევაში, შესწორება):


.wp-caption (
საზღვარი: 1px მყარი #ddd;
ტექსტის გასწორება: ცენტრში;
ფონის ფერი: # f3f3f3;
padding-top: 4px;
ზღვარი: 10 პიქსელი;
/ * არასავალდებულო პარამეტრები, რომლებიც მხარდაჭერილ ბრაუზერებში მომრგვალებულ კუთხეებს შექმნის * /
-moz-საზღვარი-რადიუსი: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
საზღვარი-რადიუსი: 3px;
}
.wp-caption img (
ზღვარი: 0;
padding: 0;
საზღვარი: 0 არცერთი;
}
.wp-caption p.wp-caption-text (
შრიფტის ზომა: 11px;
ხაზის სიმაღლე: 17 პიქსელი;
padding: 0 4px 5px;
ზღვარი: 0;
}

გარდა ამისა, არის WordPress-ის კიდევ რამდენიმე კლასი, რომელთა აღწერა არ არის საჭირო სტილის ფურცელში. WordPress აწარმოებს გვერდებს მათი გამოყენებით, ასევე შეგიძლიათ მათი სტილი:


.კატეგორიები (...)
.cat-item / * ეს კლასი ენიჭება ყველა კატეგორიას * /)
.current-cat (/ * ამჟამინდელი კატეგორიის სტილი * /)
.current-cat-parent (/ * სტილი მიმდინარე კატეგორიის მშობლისთვის * /)
.ბავშვები (/ * ბავშვის კლასი * /)
.pagenav (/ * გვერდის ნავიგაცია * /)
.page_item (/ * ნებისმიერი ელემენტი სიაში * /)
.current_page_item (/ * ეს კლასი გვერდების სიაში ენიჭება ამჟამად აქტიურ გვერდს * /)
.current_page_parent (/ * კლასი მშობელი გვერდისთვის მიმდინარე * /)
.current_page_ancestor (/ * ნებისმიერი ზედა დონის გვერდი ამ გვერდის მიმართ * /)
.ვიჯეტი (/ * ყველა ვიჯეტი შეფუთულია ამ კლასში * /)

განლაგების პროცესში გამოიყენეთ მათთვის ბლოკები და სტილები, როგორც ეს განსაზღვრულია სტატიის დასაწყისში სკრინშოტებში. ეს არ არის აუცილებელი, მაგრამ ძალიან სასურველია.

მაგალითად, მომავალში საძიებო ფორმას დავაკავშირებთ საიტს სპეციალური საშუალებით. wordpress ტეგი , რის შედეგადაც wordpress აჩვენებს ამ ფორმას:

ამიტომ, ჩვენ ამას ვითვალისწინებთ თემის შექმნისას.

და ბოლო, რაც უნდა დაამატოთ style.css-ს, არის ინფორმაცია თქვენს შესახებ და თქვენი საყვარელი თემის შესახებ. ინფორმაცია განთავსებულია ფაილის დასაწყისში კომენტარებში:

/*
თემის სახელი: შექმენით უნიკალური თემის სახელი
თემის URI: http: // ბმული თემის მთავარ გვერდზე
აღწერა: თემის აღწერა
ავტორი: თემის დამწყები
ავტორის URI: http: // ბმული ავტორის გვერდზე
თარგი: წინაპარი-თემა-სახელი
ტეგები: თემის ტეგები - მხოლოდ wordpress.org-ის მიერ შემოთავაზებული სიიდან
ვერსია: ვერსია
აი, აქ არის ლიცენზიის ტექსტი
*/

ასევე არ დაგავიწყდეთ ამის გაკეთება screenshot.pngდა ჩადეთ შაბლონის საქაღალდეში (ძირით). სტილის ფურცელში ამ გზით განთავსებული ინფორმაცია გამოჩნდება განყოფილებაში ადმინისტრაციულ პანელში "თემათა" მართვა... ჩვენ ვამოწმებთ ტიპების შაბლონს ბრაუზერებში, თუ ყველა წესი გაქვთ, შეგიძლიათ უფრო შორს წახვიდეთ.

ტიპაჟის შაბლონის გვერდების კოდს არ მივცემ, რადგან ის საკმარისად დიდია, თქვენ უბრალოდ გადმოწერეთ, შემდეგ ჩვენ ვიმუშავებთ.

როგორ მუშაობს wp თემა:

თუ თქვენ გახსნით ნაგულისხმევი თემის საქაღალდეს (wp-content / themes / default), ნახავთ ბევრ PHP ფაილს (თემა ფაილებს) და ერთ style.css ფაილს. როდესაც ჩვენ ვათვალიერებთ ბლოგს, WP მოიცავს თემის ფაილებს (index.php<

ამით სრულდება წინასწარი მომზადება და შეგვიძლია გადავიდეთ თემის შექმნაზე არსებული საწყისი მასალისგან.

Ნაბიჯი 1:
პირველ რიგში, WordPress თემების დირექტორიაში (wp-content / themes), შექმენით საქაღალდე ჩვენი თემის სახელით. Იყოს ruseller_გაკვეთილები... შემდეგ ნაგულისხმევი თემის საქაღალდიდან (wp-content / themes / default) დააკოპირეთ ფაილები comments.php, search.phpდა 404.phpჩვენი თემების საქაღალდეში. ეს ფაილები პასუხისმგებელია ბლოგზე კომენტარებსა და ძიებებზე. შემდეგ შიგნით ruseller_გაკვეთილებიდააკოპირეთ სტილის ფურცელი სტილი.cssჩვენი შაბლონი, screenshot.png (300x225)და საქაღალდე სურათები.

ახლა ჩვენი შაბლონის ფაილები უნდა „გაჭრა“, ე.ი. შეიტანეთ ცალკე ფაილების ქვედა კოლონტიტული, გვერდითი ზოლი და სათაური. დიაგრამა აჩვენებს ფაილის გამარტივებულ ხედს index.phpნიშნებით, რომლის მიხედვითაც დავჭრით:

ნაბიჯი 2 - Header.php
ჩვენ ვხსნით index.htmlდა ამოიღე ყველაფერი რაც არის კომენტარის წინ, შექმენით ახალი ფაილი header.phpდა ჩასვით მასში ამოჭრილი კოდი, შეინახეთ იგი ჩვენი თემის დირექტორიაში ruseller_გაკვეთილები:






index.html






ახლა გადადით საქაღალდეში ნაგულისხმევი თემით, გახსენით header.phpდა დააკოპირეთ ტეგები იქიდან , <link>, <h1>, და <div class=description> </b>და შეცვალეთ ისინი ჩვენი შესაბამისი ხაზებით <b>header.php</b>.</p> <p>შემდეგ ყველა ტეგი <li>მდებარეობს <b>id = "ნავი"</b>(გვერდების სია ბლოგის ზედა ნაწილში) ჩანაცვლება wordpress ფუნქციისთვის</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>შედეგად, ჩვენ ვიღებთ:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" text / css "media =" screen"/>
" />





ნაბიჯი 3 - Sidebar.php
index.htm ფაილზე დაბრუნება. უპირველეს ყოვლისა, ჩვენ ვშლით საძიებო ფორმას, შემდეგ კი ყველაფერს ამოვიღებთ