வேர்ட்பிரஸ் குழந்தை தீம்கள் தொடங்குதல்

எழுதிய கட்டுரை:
  • வேர்ட்பிரஸ்
  • புதுப்பிக்கப்பட்டது: ஜூலை 29, 2011

எனவே, இது வேர்ட்பிரஸ் உலகில் உங்கள் மாற்றங்களைத் தொடங்குகிறது என்று நீங்கள் கற்பனை செய்கிறீர்கள், மேலும் அற்புதமான தீம்களை நீங்கள் கண்டறிந்துள்ளீர்கள். நீங்கள் நிறைய பிரீமியம் கருப்பொருள்களைக் கூட காணலாம், அவற்றில் பெரும்பாலானவை உண்மையில் மதிப்புக்குரியவை (தொழில்முறை தோற்றம் மற்றும் குறியீட்டிற்கான சில புத்தகங்கள்). நீங்கள் காணும் பெரும்பாலான கருப்பொருள்கள் மிக அருகில், ஆனால் நீங்கள் எதை வேண்டுமானாலும் விரும்புவதில்லை. புதிய மெனுவை சேர்க்க, எழுத்துருவை மாற்ற, மெனுவில் சிறிது நகர்த்துவதற்கு இது நல்லது.

சரி, இது தெரிந்திருந்தால், இந்த வழிகாட்டி உங்களுக்கானது. இங்கே நாங்கள் குழந்தை கருப்பொருள்கள் உலகில் முழுக்குவோம், அங்கு நீங்கள் வாங்கிய அற்புதமான கருப்பொருளை உடைக்காமல் அல்லது எதிர்கால புதுப்பிப்புகளை இழக்காமல் நீங்கள் விரும்பும் எதையும் செய்ய முடியும், ஏனெனில் நீங்கள் செய்யும் எதையும் செயல்தவிர்க்க முடியாது.

தீம் கோப்புகளை மாற்றாமல் தோற்றத்தை திருத்துதல்

சுருக்கமாக, அது என்ன குழந்தை தீம் பற்றி: அசல் கோப்புகளை மாற்றாமல் தனிப்பயனாக்குதலில். நீங்கள் வெளிப்படையாக கூறாவிட்டால், ஒரு குழந்தை தீம் அடிப்படையில் உங்கள் முக்கிய கருப்பொருளின் (பெற்றோர்) அதே செயல்பாடுகளையும் தோற்றத்தையும் கொண்டிருக்கும்.

நீங்கள் உங்கள் குழந்தை தீம் கோப்பகத்தில் ஒரு புதிய கோப்பை உருவாக்கும் வரை நீங்கள் பெற்றோர் கோப்புகளை பயன்படுத்தி வருவீர்கள், அதனால் குறைந்தது 2 கோப்புகளை, style.css மற்றும் functions.php கோப்பை, அனைத்து பிற கோப்புகளை பெற்றோர் தீம் இருந்து பிடிக்கும்.

நாங்கள் இங்கு நிறைய சாத்தியக்கூறுகள் உள்ளன, ஆனால் முக்கிய ஆதாயம் நீங்கள் அசல் கருப்பொருளை எளிதில் மீட்டெடுக்க முடியும், எனவே நீங்கள் எந்த திருத்தங்களையும் இழக்காமல் உங்கள் முக்கிய கருப்பொருளை புதுப்பிக்கலாம், ஏனென்றால் அவை முற்றிலும் வேறுபட்ட கோப்புறையில் செய்யப்படுகின்றன.

எங்கள் கைகள் அழுக்கு பெறலாம்

எனவே, மிக முதல் படி உங்கள் / wp-content / themes / folder கீழ் ஒரு புதிய குழந்தை தீம் அடைவு உருவாக்குகிறது. அது "இருபது குழந்தை" என்று அழைக்கலாம், மற்றும் நமது அடிப்படை styles.css கோப்பு உருவாக்க நாம்:

/ * தீம் பெயர்: இருபது குழந்தை தீம் URI: http://www.webrevenue.co விளக்கம்: கற்றல் குழந்தை கருப்பொருள்கள் இப்போது ஆசிரியர்: ரோசெஸ்டர் Oliveira ஆசிரியர் URI: http://www.webrevenue.co/author/rochester/ வார்ப்புரு: twentytwelve * / / * முக்கிய தீம் CSS கோப்பு அழைப்பு / / இறக்குமதி ("// Twenty / style.css"); / * நீங்கள் விரும்பும் எதையும் சேர்க்கவும் * /

அளவுருக்கள் (மற்ற விருப்பமான அளவுருக்கள் தவிர):

  • தீம் பெயர்: கருப்பொருள்கள் தேர்வுத் திரையில் நீங்கள் காணும் பெயர்
  • தீம் URI: அங்கு காட்டப்படும் இணைப்பு
  • விளக்கம்: ஒரு குறுகிய விளக்கம் அதனால் நீங்கள் இதை பற்றி என்ன நினைவில் கொள்கிறீர்கள்
  • ஆசிரியர்: யார் குழந்தை தீம் உருவாக்கியது
  • ஆசிரியர் URI: நீங்கள் ஆசிரியரின் தளத்துடன் இணைக்க விரும்பினால்
  • முக்கிய தீம் கோப்புறை (நீங்கள் முக்கிய வேறு ஒரு தீம் பயன்படுத்த வேண்டும் என்றால், இந்த அளவுரு பதிலாக)

நீங்கள் இந்த குறியீடு சேர்க்க நீங்கள் WP நிர்வாகம் கீழ் குழந்தை தீம் பார்க்க வேண்டும்> தோற்றம்> தீம்கள். நீங்கள் இப்போது அதைத் தேர்ந்தெடுக்கலாம், மேலும் அனைத்து மாற்றங்களும் உங்கள் தளத்தில் காணப்படும்.

குழந்தை தீம் திருத்துகிறது 101

நீங்கள் பூஜ்ய CSS அறிவு இருந்தால் இது பயனற்றது, சரியானதா? தவறான! CSS உண்மையில் மிகவும் எளிதானது மற்றும் நீங்கள் அங்கு உதவ துணுக்குகள் நிறைய காணலாம். உங்கள் தனிப்பயனாக்கங்களில் உங்களுக்கு உதவ சில எளிய உதவிக்குறிப்புகள் உள்ளன.

# 2 Firebug நிறுவவும்

நிறைய பேர் Chrome மற்றும் Safari ஐ நேசிக்கிறார்கள் (நான் செய்கிறேன்!), ஆனால் எனக்கு ஃபயர்பாக்ஸ் மேம்பாட்டிற்காக மிகவும் நன்றாக இருக்கிறது. எனவே, நீங்கள் அதை பயன்படுத்த விரும்பினால், நான் ஃபயர்பக் நிறுவ பரிந்துரைக்கிறேன், தற்போதைய உறுப்பு செயலில் என்று அனைத்து தேர்வாளர்கள் புரிந்து கொள்ள ஒரு அற்புதமான கருவி இது.

நீங்கள் அதை நிறுவியவுடன், நீங்கள் F12 ஐ அழுத்தி அல்லது பக்கத்தில் எங்காவது வலது கிளிக் செய்து, "அங்கம் ஒன்றைத் தேர்ந்தெடுக்கவும்". நீங்கள் தற்போதைய பக்கம் HTML மற்றும் CSS (மற்றும் பிற பயனுள்ள பல தாவல்கள், ஒருவேளை நாம் அவர்களை பற்றி பேச முடியும்) ஒரு புதிய சாளரத்தை பார்ப்பீர்கள்.

CSS பெட்டியில் நீங்கள் தற்போதைய உறுப்பு, மற்றும் மேல் மேலும் "குறிப்பிட்ட" ஆட்சி பயன்படுத்தப்படும் அனைத்து CSS விதிகள் மேலே இருந்து கீழே பார்க்க வேண்டும். அது குளிர் தான், ஆனால் இந்த தகவலுடன் நீங்கள் என்ன செய்ய முடியும் என்பதை பார்ப்போம்

# 2 CSS தனித்துவத்தை (அல்லது தேர்வுக்குழு எடை)

ஒவ்வொரு CSS விதி அதன் தேர்வுக்குழு, பண்புகள் மற்றும் மதிப்புகள் உள்ளன. ஆனால் உலாவி அதே உறுப்பு பாதிக்கும் என்று 2 அல்லது அதற்கு மேற்பட்ட விதிகள் கண்டுபிடிக்க போது அது இன்னும் ஒரு பொருத்தமான இது தேர்வு செய்ய வேண்டும். நாம் பொதுவாக இந்த "ஆட்சி" கருத்தில் கொள்ள என்ன புரிந்து கொள்ள வேண்டும்:

  • ! முக்கியமான அறிவிப்பு வேறு எதையும் மேலெழுதும்
  • இன்லைன் CSS எதையும் மேலெழுதும் ஆனால்! முக்கிய விதிகள்
  • ID புள்ளிகள் (#header, #footer, # கொள்கலன் ...) மதிப்புள்ள புள்ளிகள்
  • X புள்ளிகள் மதிப்புள்ள வகுப்புகள் (.main, .nav, .box)
  • குறிச்சொற்கள் (உடல், div, ப, ஒரு) மதிப்பு 26 புள்ளி
  • யுனிவர்சல் தேர்வுக்குழு மற்றும் போலி வகுப்புகள் (*,: மிதவை, பிறகு) மதிப்புள்ள ஆனால் ஒரு "டை"

சரி, இதை நன்றாக புரிந்து கொள்வதற்கு ஒரு எடுத்துக்காட்டு பார்க்கலாம். இருபது பன்னிரண்டுகளைப் பயன்படுத்தி உங்கள் தளத்தின் தலைப்பை வலது கிளிக் செய்து, தோன்றும் முதல் CSS இது என்பதை நீங்கள் காணலாம்:

. சைட்-தலைப்பு {திணிப்பு: 1.71429EM 0; } கட்டுரை, விவரங்கள், உருவப்படம், எண்ணிக்கை, முடிப்பு, தலைப்பு, hgroup, nav, பிரிவு {display: block; }

முதல் தேர்வுக்குழு 10 புள்ளிகளைக் கொண்டது (இது ஒரு வகுப்பு என்பதால்), இரண்டாவது ஒரு புள்ளியில் ஒவ்வொரு புள்ளியைக் கொண்டிருக்கிறது. நீங்கள் # header div போன்ற ஏதேனும் ஒன்றை வைத்திருந்தால், அந்த தேர்வுக்குழு நிச்சயம் முதலில் காண்பிக்கும்.

இது ஏன் முக்கியம்?

அதன் CSS கோப்புகளை எடிட்டிங் இல்லாமல் முக்கிய தீம் திருத்த பொருட்டு நீங்கள் எப்போதும் முக்கிய தீம் வரையறுக்கப்பட்ட விதிகள் விட புள்ளிகள் என்று விதிகளை பயன்படுத்த வேண்டும், ஏனெனில். நீங்கள் இந்த ஸ்மார்ட் இருக்க முடியும் மற்றும் எளிய குறியீடு பயன்படுத்த முடியும். உதாரணமாக இந்த சொத்து மேலெழுத:

. சைட்-தலைப்பு {திணிப்பு: 1.71429EM 0; }

உங்கள் குழந்தையின் தீம் CSS இல் இதைச் சேர்க்கலாம், ஆனால் நீங்கள் கூடாது:

. தள தலைப்பு- {padding 15px 0! முக்கியமான; }

இது மோசமான குறியீடாக இருப்பதால், ஒரு பக்கத்தில் மாற்ற வேண்டுமென்றால், மீண்டும் மாற்றியமைக்க இது கடினமாக உள்ளது. எனவே நீங்கள் இதை எளிமையாக பயன்படுத்தலாம்:

உடல். தள தலைப்பு {திணிப்பு: 15px 0; }

இந்த தேர்விக்கு 11 புள்ளிகள் உள்ளன, இது அசல் XNUM க்கும் அதிகமாக உள்ளது, எனவே இந்த குறியீடு பயன்படுத்தப்படும்.

#3 செயல்பாடுகளை நன்கு பயன்படுத்துங்கள்

அசல் கோப்பில் ADDITION இல் ஏற்றப்படும் ஒரே கோப்பு குழந்தை functions.php கோப்பாகும். அது WP குழு செய்த ஒரு ஸ்மார்ட் பணிபுரியும், எனவே நீங்கள் உண்மையான செயல்பாடுகளை வைத்து உங்கள் சொந்த செயல்பாடுகளை சேர்க்க முடியும். கேட்ச் உள்ளது, குழந்தை தீம் செயல்பாடுகளை முதல் ஏற்றப்படும் மற்றும் தீம் மேம்பாட்டாளர் செயல்பாடுகளை அறிவிக்கும் போது மோதல்கள் தவிர்க்க இந்த மாதிரி ஏதாவது செய்ய வேண்டும்:

(! function_exists ('top_menu')) {function top_menu () {// குளிர் குறியீடு} add_action ('wp_head', 'top_menu'); }

ஏனென்றால், உங்கள் குழந்தை தீம் கோப்பில் ஒரு செயல்பாட்டை நீங்கள் வரையறுத்தால், அது அசல் ஒன்றை மேலெழுதும். தீம் டெவலப்பர் இதைச் செய்யாவிட்டால், நீங்கள் ஒரு அசிங்கமான PHP பிழையுடன் முடிவடையும் (ஒரே செயல்பாடு இரண்டு முறை உருவாக்கப்படுவதால்).

# 4 சில CSS பண்புகளை அறியவும்

CSS ஐப் பயன்படுத்தி நீங்கள் மறைக்க முடியும் என்று உங்களுக்குத் தெரியுமா? சரியான தேர்வுசெய்தியை கண்டுபிடிப்பதற்கு நீங்கள் தீப்பொருளை நிறுவ வேண்டும், ஆனால் இந்த குறியீட்டைச் சேர்ப்பதன் மூலம் ஒரு பொருளை மறைக்கலாம்:

உடல் ஒரு {காட்சி: none}

இது மிகவும் சிக்கலானதாக சேர்க்க, நீங்கள் சிறிய வசனங்களைச் சேர்க்க முடியும் என்பதால், நீங்கள் விலை குறியீட்டுக்குப் பிறகு "விற்பனைக்கு!" உரை விரும்பினால், இந்த குறியீட்டைப் பயன்படுத்தலாம்:

.price del: பின் {color: red; உள்ளடக்கம்: "விற்பனைக்கு!"; }

நீங்கள் என்ன நினைக்கிறீர்கள்?

இந்த வழிகாட்டி பற்றி நீங்கள் என்ன நினைக்கிறீர்கள்? குழந்தை கருப்பொருள்களைப் பயன்படுத்துகிறீர்களா? நீங்கள் ஏற்கனவே பயன்படுத்துகிறீர்களா? கீழே கருத்துரைப் பகுதியைப் பயன்படுத்தி எங்களுக்கு தெரியப்படுத்துங்கள்!

ரோசெஸ்டர் ஒலிவேரா பற்றி

நான் இன்ஜபுபா (எம்.ஜி.), பிரேசிலில் இருந்து ஒரு வலை வடிவமைப்பாளர் மற்றும் தொழில் முனைவர். நான் முட்டாள்தனமான தலைப்புகள் பற்றி எழுதும் சில நல்ல விஷயங்களை செய்வதை விரும்புகிறேன்.

நான்"