როგორ დავამატოთ პერსონალური სტილი WordPress- ის ვიზუალურ რედაქტორს

როგორ დავამატოთ პერსონალური სტილი WordPress- ის ვიზუალურ რედაქტორს

გადახედეთ თქვენს WordPress ვიზუალურ რედაქტორს. არსებობს რამდენიმე სტანდარტული ვარიანტი თქვენი შინაარსის ფორმატირებისა და სტილისთვის, მაგრამ პერსონალიზაციის თვალსაზრისით არც თუ ისე ბევრი რამ გააკეთა, რომ თქვენი შეტყობინებები და გვერდები გამოიყურებოდეთ ნამდვილად ლამაზი.


WordPress რედაქტორი

ახლა თქვენ შეიძლება იცოდეთ, რომ თქვენ გაქვთ WordPress– ის ტექსტებსა და ვიზუალურ რედაქტორებს შორის უკან და უკან გადახტომას, CSS– ში ჩასასვლელად, ღილაკების და ტექსტური ბლოკების შესაქმნელად, მაგრამ ეს ტკივილია და თუ არ გაქვთ დიდი გამოცდილება კოდის რედაქტირების საშუალებით, ტექსტის რედაქტორი ცოტათი დამაშინებელია.

უბრალოდ არ იქნებოდა ადვილი, თუ შეგიძიათ შექმნათ თქვენი საკუთარი სტილი, განათავსოთ ისინი ჩამოსაშლელ მენიუში WordPress რედაქტორში და შეარჩიეთ მათი გამოყენება საჭიროების შემთხვევაში? დიახ, ეს ბევრად უფრო ადვილია, ამიტომ გვინდა გამოვყოთ, თუ როგორ უნდა გავაკეთოთ აქ. გაითვალისწინეთ, რომ მიუხედავად იმისა, რომ ჩვენ ვცდილობთ, რომ ეს პროცესი მაქსიმალურად მარტივი იყოს, ეს ხელს შეუწყობს CSS- ს ცოდნის გარკვევას, თუ გსურთ იპოვოთ საბაჟო სტილის სრული სარგებელი..

მოდით გადახედოთ, თუ როგორ უნდა დაამატოთ საბაჟო სტილი WordPress ვიზუალურ რედაქტორში.

დაამატეთ Custom Styles WordPress- ის ვიზუალურ რედაქტორში, კოდის დამატებით

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

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

ფუნქცია myprefix_mce_buttons_1 ($ ღილაკი) {
array_unshift ($ ღილაკი, 'სტილისაკრავი');
$ ღილაკების დაბრუნება;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

დაუბრუნდით რედაქტორს თქვენს WordPress- ის ერთ-ერთ პოსტზე და ახლა თქვენ უნდა ნახოთ რედაქტორის ზედა რიგში ახალი “ფორმატები”. ყურადღება მიაქციეთ, როგორ ჩავრთეთ „mce_buttons_1“? ეს განათავსებს ფორმატის მენიუს ღილაკს mce რედაქტორის პირველ რიგში. თქვენ ასევე შეგიძლიათ გამოიყენოთ “mce_buttons_2” ფილტრი, რომ განათავსოთ იგი მეორე რიგში ან “mce_buttons_3”, რომ განათავსოთ იგი მე -3 რიგში.

ასე რომ, ახლა, როდესაც თქვენ ჩართეთ მენიუს ელემენტი, დროა დაამატოთ თქვენი პერსონალური სტილები, რომ გამოიყენოთ თქვენი შეტყობინებების შიგნით. აიღეთ ქვემოთ ჩამოთვლილი კოდი და ჩასვით იგი თქვენსში ფუნქციები.php ფაილი, რომელიც დაამატებს 2 ახალ სტილს ფორმატების ჩამონათვალში – “თემის ღილაკი” და “Highlight”.

/ **
* დაამატეთ საბაჟო სტილები mc ფორმატის ჩამოსაშლელად
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
ფუნქცია myprefix_add_format_styles ($ init_array) {
$ style_formats = მასივი (
// თითოეული მასივიანი ბავშვი საკუთარი პარამეტრებით არის ფორმატი - დაამატეთ რამდენიც გსურთ
მასივი (
'title' => __ ('Theme Button', 'text-domain'), // სათაური ჩამოსაშლელად
'selector' => 'a', // რედაქტორი
'class' => 'თემა-ღილაკი' // კლასის სახელი, რომელიც გამოიყენება CSS- სთვის
),
მასივი (
'title' => __ ('Highlight', 'text-domain'), // სათაური ჩამოტვირთვისთვის
'inline' => 'სპანი', // გადაარჩინეთ ტექსტი არჩეული შინაარსის გარშემო
'class' => 'text-highlight' // კლასის სახელი, რომელიც გამოიყენება CSS- სთვის
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
დააბრუნე $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

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

ახლა, როდესაც თქვენ გაქვთ ახალი სტილები, შეგიძლიათ ხაზგასმით აღვნიშნოთ შინაარსი თქვენს რედაქტორში და გამოიყენოთ სტილი. გაითვალისწინეთ, როგორ აქვს “თემის ღილაკის” ფორმატს შერჩევითი პარამეტრი? ეს ნიშნავს, რომ სტილი შეიძლება გამოყენებულ იქნას მხოლოდ სპეციფიკურ ამომრჩეველზე (ამ შემთხვევაში “a” ან “ბმული” ჩანართი). მეორე ფორმატს, რომელიც დავამატეთ “Highlight” – ს არ აქვს შერჩევითი პარამეტრი, არამედ “ინლაინური” პარამეტრი, რომელიც მას ეუბნება, რომ გამოიყენოს სტილი თქვენს რედაქტორში მითითებული ტექსტის მიმართ და გამოიყენეთ იგი უნიკალური კლასის სახელწოდებით. თქვენ შეგიძლიათ ნახოთ მაგალითი ჩვენი WordPress- ის ზოგადი თემიდან, თუ როგორ გამოვიყენეთ ფორმატები, რათა მომხმარებლებმა ადვილად გამოიყენონ საკონტროლო გამშვები პუნქტის ჩამონათვალი..

გამშვები სია

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

.თემა-ღილაკი {
ჩვენება: ინლაინ-ბლოკი;
padding: 10 15px;
ფერი: #fff;
ფონი: # 1796c6;
ტექსტის გაფორმება: არცერთი;
}
.თემა-ღილაკი: hover {
ტექსტის გაფორმება: არცერთი;
opacity: 0.8;
}
.ტექსტის მონიშვნა {
ფონი: # FFFF00;
}

ახლა, ეს აპირებს დაამატოთ სტილის თქვენს ახალ ფორმატებს წინა ფენისთვის, ასე რომ, როდესაც მიმართავენ, ნახავთ მათ პირდაპირ. ჰეი! არ იქნება კარგი, რომ თქვენს სტილს რეალურ რედაქტორშიც ნახოთ? ამისათვის თქვენ უნდა გამოიყენოთ WordPress- ში „რედაქტორის სტილის“ ფუნქცია. თუ თქვენ შექმნით თქვენს საკუთარ თემას, თქვენ გინდათ შექმნათ ახალი css ფაილი თქვენს თემაში, სახელწოდებით “რედაქტორი-სტილი.კსი” (შეგიძლიათ დაასახელოთ ის, რაც გსურთ. დაამატეთ თქვენი ფორმატები და შემდეგ დაამატეთ ქვემოთ მოყვანილი ფუნქცია, რომ ჩატვირთოთ იგი უკანა პლანზე.

ფუნქცია myprefix_theme_add_editor_styles ()
add_editor_style ('რედაქტორი-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

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

დაამატეთ Custom Styles WordPress ვიზუალურ რედაქტორს ლამაზი მოდულით

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

TinyMCE საბაჟო სტილის მოდული

უბრალოდ მოძებნოთ, დააინსტალირეთ და გააქტიურეთ TinyMCE Custom Styles მოდული გააქტიურეთ იგი თქვენს WordPress საიტზე.

TinyMCE საბაჟო სტილის პარამეტრები

Წადი პარამეტრები> TinyMCE prof.styles თქვენი WordPress დაფის მარცხენა მხარეს. ეს არის ის, სადაც თქვენ შეცვლით პარამეტრს.

TinyMCE საბაჟო სტილის პარამეტრები

მოდული საშუალებას გაძლევთ აირჩიოთ, სადაც არის თქვენი სტილის ფურცლები, ან სად გსურთ მათი განთავსება. გირჩევთ შექმნათ ახალი პერსონალური დირექტორია. შეარჩიეთ მესამე ვარიანტი და მიუთითეთ თქვენი დირექტორია სახელი, შემდეგ გადადით გვერდზე, დააჭირეთ თქვენს Პარამეტრების შენახვა შემდეგ ეტაპზე გადასვლამდე.

TinyMCE საბაჟო სტილის დამატება ახალი

პარამეტრების შენახვის შემდეგ, გადადით ქვემოთ, რომ აირჩიოთ ახალი სტილის ღილაკი.

TinyMCE საბაჟო სტილის პარამეტრები

ეს არის ის, სადაც გსურთ აირჩიოთ ის, რაც გსურთ თქვენი სტილის სტილები გამოიყურებოდეს. ეს, ძირითადად, მარტივი ვებზე დაფუძნებული რედაქტორია, რომელიც გამოიმუშავებს CSS კოდს თქვენთვის. ჩაწერეთ სათაური იმისთვის, რაც გსურთ ჩამოსაშლელ მენიუში. შეარჩიეთ თუ არა გსურთ სელექტორი, ინლაინი ან ბლოკის ტიპი. მოგერიდებათ გამოიყენოთ სკრინშოტი ზემოთ, რომ შეავსოთ CSS კლასები და სტილი, ან შექმნათ თქვენივე იმის მიხედვით, თუ რას აპირებთ dropdown მენიუს გამოყენებისთვის. დასრულების შემდეგ დააჭირეთ გვერდის ბოლოში Save Settings.

TinyMCE საბაჟო სტილის ფორმატი

ახლა დროა ვნახოთ, როგორ გამოიყურება ახალი საბაჟო სტილი თქვენს რედაქტორში. გახსენით ახალი პოსტი ან გვერდი და ვიზუალური რედაქტორის მარცხენა მხარეს მიუთითეთ ფორმატის ჩამოსაშლელი მენიუ. ის მეორე სტრიქონში გამოჩნდება. მას შემდეგ რაც დააჭირეთ ჩამოსაშლელ მენიუს, იგი გამოავლენს თქვენ მიერ შექმნილ ახალ სტილს.

TinyMCE საბაჟო სტილის ფორმატში გამოყენება

დააჭირეთ დიდი ლურჯი ღილაკის პარამეტრს, ან რაც თქვენ შექმენით, რომ ნახოთ ის რედაქტორში გამოვლენილია. გამოიყენეთ იგი უბრალოდ ხაზს უსვამთ თქვენთვის სასურველი ტექსტი, შემდეგ დააჭირეთ თქვენს ვარიანტს და voila!

დასკვნა

ეს ყველაფერი ახლაა! თქვენ ყოველთვის შეგიძლიათ გაიგოთ მეტი, თუ როგორ გამოიყენოთ ახალი სტილები, შემოწმების გზით WordPress კოდექსის გვერდი ამ თემისადმი მიძღვნილი.

გაეცანით კომენტარების განყოფილებას, თუ გაქვთ რაიმე შეკითხვა, თუ როგორ შეგიძლიათ დაამატოთ საბაჟო სტილი WordPress ვიზუალური რედაქტორისთვის. და მოგერიდებათ გაგიზიაროთ თქვენ მიერ შექმნილი ნებისმიერი უჩვეულო სტილი, რომ თქვენი საიტი ოდნავ ლამაზი იყოს!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map