ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು - ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ
ಪರಿವಿಡಿ
ಇದು ಎಲ್ಲರಿಗೂ ಸಂಭವಿಸುತ್ತದೆ.
ನೀವು ಇಷ್ಟಪಡುವ ಥೀಮ್ ಅನ್ನು ನೀವು ಕಂಡುಕೊಳ್ಳುತ್ತೀರಿ, ನೀವು ಅದನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಸೈಟ್ನ ನೋಟವನ್ನು ಆನಂದಿಸಲು ಕೆಲವು ತಿಂಗಳುಗಳನ್ನು ಕಳೆಯುತ್ತೀರಿ. ಆದರೆ ನಂತರ, ಕೆಲವು ತಿಂಗಳುಗಳ ನಂತರ, ಥೀಮ್ ಹಳತಾದ ಭಾವನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಸ್ವಲ್ಪ ನೀರಸ.
ಒಂದೇ ಸಮಸ್ಯೆ ಏನೆಂದರೆ, ನೀವು ಹೊಸದನ್ನು ಹುಡುಕಲು ಒಂದೆರಡು ಗಂಟೆಗಳ ಕಾಲ ಕಳೆಯಲು ಬಯಸುವುದಿಲ್ಲ. ನಿಮ್ಮ ಥೀಮ್ಗೆ ಸ್ವಲ್ಪ ಮಸಾಲೆ ಸೇರಿಸಲು ಒಂದು ಮಾರ್ಗವಿದ್ದರೆ, ಅದನ್ನು ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡಲು ಸ್ವಲ್ಪ ಜ್ವಾಲೆ.
ಸಹ ನೋಡಿ: ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರನ್ನು ಹೇಗೆ ಸಮೀಕ್ಷೆ ಮಾಡುವುದು & ತೊಡಗಿಸಿಕೊಳ್ಳುವ ಸಮೀಕ್ಷೆಗಳನ್ನು ರಚಿಸಿನೀವು ಹತಾಶೆಯಿಂದ ನಿಮ್ಮ ಕೈಗಳನ್ನು ಮೇಲಕ್ಕೆ ಎಸೆಯುವ ಮೊದಲು, ನಿಮ್ಮ ಮಸಾಲೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ನಾನು ನಿಮಗೆ ಸುಲಭವಾದ ಮಾರ್ಗವನ್ನು ತೋರಿಸುತ್ತೇನೆ ಹೆಚ್ಚು ಶ್ರಮವಿಲ್ಲದೆ ಥೀಮ್, ಮತ್ತು ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದಾದ ಅನಗತ್ಯ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸದೆಯೇ.
Dashicons ನಮೂದಿಸಿ. ಡ್ಯಾಶಿಕಾನ್ಗಳು ವರ್ಡ್ಪ್ರೆಸ್ 3.8 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಫಾಂಟ್ ಐಕಾನ್ಗಳಾಗಿವೆ. ಅವು ನಿಮ್ಮ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗೆ ಲಾಗ್ ಇನ್ ಮಾಡಿದಾಗ ನೀವು ನೋಡುವ ಅದ್ಭುತ ಮತ್ತು ತಂಪಾದ ಐಕಾನ್ಗಳಾಗಿವೆ. ನೀವು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಥೀಮ್ಗೆ ಸೇರಿಸಿದರೆ ಅದು ತಂಪಾಗಿರಬಹುದಲ್ಲವೇ?
ಸರಿ, ನೀವು ಮಾಡಬಹುದು ಮತ್ತು ನಾನು ನಿಮಗೆ ಹೇಗೆ ತೋರಿಸಲಿದ್ದೇನೆ.
ನಿಮ್ಮಲ್ಲಿ ನೀವು ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ನ್ಯಾವಿಗೇಶನ್ ಮೆನು?
ಸರಳ ಉದಾಹರಣೆಯಿಂದ ಪ್ರಾರಂಭಿಸೋಣ. ಆವೃತ್ತಿ 3.8 ರಿಂದ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಈಗಾಗಲೇ ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ ಆದರೆ ಅವುಗಳನ್ನು ನಿಮ್ಮ ಸೈಟ್ನ ಮುಂಭಾಗದಲ್ಲಿ ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲು ನೀವು ಇನ್ನೂ ಅವುಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ; ಅಂದರೆ, ನಿಮ್ಮ ಥೀಮ್.
ಹಂತ 1: ನಿಮ್ಮ ಥೀಮ್ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸಿದ್ಧಗೊಳಿಸಿ
ನಿಮ್ಮ ಥೀಮ್ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸಿದ್ಧಪಡಿಸಲು ಮೊದಲು ನಿಮ್ಮ functions.php ಫೈಲ್ ಅನ್ನು ತೆರೆಯಿರಿ (ಗೋಚರತೆ> ನಲ್ಲಿ ಕಂಡುಬರುತ್ತದೆ ;ಸಂಪಾದಕ - ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಇದು ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಥೀಮ್ನ CSS ಫೈಲ್ ಅನ್ನು ತೆರೆಯುತ್ತದೆ. ಮುಂದೆ ಹೋಗಿ ಮತ್ತು ನೋಡಿfunctions.php ಫೈಲ್ ಮತ್ತು ಅದನ್ನು ಸಂಪಾದಕದಲ್ಲಿ ಲೋಡ್ ಮಾಡಲು ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.)
ಹಂತ 2: ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಎನ್ಕ್ಯೂ ಮಾಡಿ
ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ಈ ಸಾಲುಗಳನ್ನು ಅಂಟಿಸಿ ಕೊನೆಯಲ್ಲಿ ಕೋಡ್ನ:
//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }
ಸರಿ! ಈಗ ನಿಮ್ಮ ಥೀಮ್ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಬಳಸಲು ಸಿದ್ಧವಾಗಿದೆ.
ಹಂತ 3: ಮೆನು ಐಟಂಗಳಿಗೆ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸೇರಿಸಲಾಗುತ್ತಿದೆ
ನಿಮ್ಮ ಹೋಮ್ ಲಿಂಕ್ಗಾಗಿ ಡ್ಯಾಶಿಕಾನ್ ಅನ್ನು ಸೇರಿಸೋಣ. Dashicons ವೆಬ್ಸೈಟ್ಗೆ ಹೋಗಿ ಮತ್ತು ನೀವು ಇಷ್ಟಪಡುವ ಐಕಾನ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.
ನವೀಕರಿಸಿ: Dashicons ಮೂಲತಃ GitHub.io ನಲ್ಲಿ ಲಭ್ಯವಿವೆ, ಆದರೆ ನಂತರ ಅವುಗಳನ್ನು WordPress.org ನಲ್ಲಿ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಲಾಗಿದೆ.
ಹಂತ 4:
ಅಪೇಕ್ಷಿತ ಐಕಾನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ (ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾನು ಹೋಮ್ ಐಕಾನ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ್ದೇನೆ) ತದನಂತರ HTML ನಕಲಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿ. ಇದು ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಕೋಡ್ನೊಂದಿಗೆ ಪಾಪ್-ಅಪ್ ವಿಂಡೋವನ್ನು ನೀಡುತ್ತದೆ.
ಹಂತ 5:
ನಿಮ್ಮ WordPress ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗೆ ಹಿಂತಿರುಗಿ, ಗೋಚರತೆ > ಕ್ಲಿಕ್ ಮಾಡಿ ; ಮೆನುಗಳು ಮತ್ತು ಕೋಡ್ ಅನ್ನು ನ್ಯಾವಿಗೇಶನ್ ಲೇಬಲ್ ಎಂದು ಹೇಳುವ ಸ್ಥಳದಲ್ಲಿ ಅಂಟಿಸಿ.
ನೀವು ಇನ್ನೂ ಪದವನ್ನು ತೋರಿಸಬೇಕೆಂದು ಬಯಸಿದರೆ, ಮುಚ್ಚುವ ಡಿವಿ ಬ್ರಾಕೆಟ್ ನಂತರ ಅದನ್ನು ಟೈಪ್ ಮಾಡಿ.
ಕ್ಲಿಕ್ ಮಾಡಿ ನಿಮ್ಮ ಮುಖಪುಟವನ್ನು ಉಳಿಸಿ ಮತ್ತು ಲೋಡ್ ಮಾಡಿ. ನಿಮ್ಮ ಹೋಮ್ ಲಿಂಕ್ ಈಗ ಉತ್ತಮವಾದ, ಗರಿಗರಿಯಾದ ಡ್ಯಾಶಿಕಾನ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು.
ನೀವು ಇದನ್ನು ಎಲ್ಲಾ ನ್ಯಾವಿಗೇಶನ್ ಮೆನು ಐಟಂಗಳಿಗಾಗಿ ಅಥವಾ ಮನೆಗೆ ಮಾತ್ರ ಮಾಡಬಹುದು. ಹೊಂದಾಣಿಕೆಯ ಐಕಾನ್ಗಳೊಂದಿಗೆ ಮೇಲಿನ ಹಂತಗಳನ್ನು ಪುನರಾವರ್ತಿಸಿ. ಅದು ಸುಲಭವಾಗಿದೆ ಸರಿ?
ಪೋಸ್ಟ್ ಮೆಟಾದಲ್ಲಿ ನೀವು ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಹೇಗೆ ಬಳಸುತ್ತೀರಿ?
ನೀವು ಒಂದು ಹೆಜ್ಜೆ ಮುಂದೆ ಹೋಗಿ ನಿಮ್ಮ ಪೋಸ್ಟ್ ಮೆಟಾಗೆ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ ಲೇಖಕರ ಮುಂದೆ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸೇರಿಸಿ ಹೆಸರು, ದಿನಾಂಕ, ವರ್ಗ ಅಥವಾ ಟ್ಯಾಗ್; ಅವಲಂಬಿತವಾಗಿನಿಮ್ಮ ಥೀಮ್ ಮತ್ತು ಅದು ಪ್ರದರ್ಶಿಸುವ ಮಾಹಿತಿ.
ನೀವು ಈಗಾಗಲೇ ನಿಮ್ಮ ಥೀಮ್ನಲ್ಲಿ ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಸರದಿಯಲ್ಲಿ ಇರಿಸಿರುವುದರಿಂದ, ನೀವು ಈಗ ಮಾಡಬೇಕಾಗಿರುವುದು ನಿಮ್ಮ style.css ಫೈಲ್ ಅನ್ನು ತೆರೆಯುವುದು (ಅಥವಾ ಕಸ್ಟಮ್ CSS ಎಡಿಟರ್ ಅನ್ನು ಬಳಸಿ ಅದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ. ನಿಮ್ಮ ಥೀಮ್ ನವೀಕರಿಸಿದ ನಂತರ ಬದಲಾವಣೆಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳಬೇಡಿ!), ಹೊಂದಾಣಿಕೆಯ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಹುಡುಕಿ ಮತ್ತು CSS ಕೋಡ್ ಸೇರಿಸಿ.
ಸಹ ನೋಡಿ: ಅತಿಥಿ ಬ್ಲಾಗಿಂಗ್ ತಂತ್ರ: ಪಾರ್ಕ್ನಿಂದ ನಿಮ್ಮ ಮುಂದಿನ ಅತಿಥಿ ಪೋಸ್ಟ್ ಅನ್ನು ನಾಕ್ ಮಾಡುವುದು ಹೇಗೆನಿಮ್ಮ ಹೆಸರು ಅಥವಾ ನಿಮ್ಮ ಲೇಖಕರ ಹೆಸರಿನ ಮುಂದೆ ನೀವು ಐಕಾನ್ ಅನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಹೇಳೋಣ.
ಹಂತ 1:
ಮೊದಲಿಗೆ ನಾವು ಬಯಸಿದ ಐಕಾನ್ ಅನ್ನು ಆರಿಸಿಕೊಳ್ಳುತ್ತೇವೆ.
ಹಂತ 2:
ನಂತರ ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ, ಮತ್ತು ಈ ಬಾರಿ CSS ನಕಲು ಆಯ್ಕೆಮಾಡಿ. ಮತ್ತೊಮ್ಮೆ, ನೀವು ಅಂಟಿಸಲು ಅಗತ್ಯವಿರುವ ಕೋಡ್ನೊಂದಿಗೆ ಪಾಪ್-ಅಪ್ ವಿಂಡೋವನ್ನು ನಿಮಗೆ ನೀಡುತ್ತದೆ.
ಹಂತ 3:
ಈಗ ನಿಮ್ಮ style.css ತೆರೆಯಿರಿ ಮತ್ತು ಅನುಗುಣವಾದ ಆಯ್ಕೆಯನ್ನು ಹುಡುಕಿ, ಈ ಸಂದರ್ಭದಲ್ಲಿ - .entry-author. Dashicons ವೆಬ್ಸೈಟ್ನಿಂದ ನೀವು ನಕಲಿಸಿದ CSS ಕೋಡ್ ಅನ್ನು ಸೇರಿಸುವ ಮೊದಲು ಮತ್ತು ನಂತರ ಅಂಟಿಸುವ ಮೂಲಕ, ಲೇಖಕರ ಹೆಸರು ಅದರ ಮುಂದೆ ಉತ್ತಮ ಐಕಾನ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ. ನೀವು Dashicons ಫಾಂಟ್ ಅನ್ನು ಬಳಸುತ್ತಿರುವಿರಿ ಎಂಬುದನ್ನು ಸಹ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ. ಮಾರ್ಪಡಿಸಿದ ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
.entry-author:before { font-family: "dashicons"; content: "\f110"; }
ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಕೂಡ ಸೇರಿಸೋಣ, ಮತ್ತು ಈಗ ಪೂರ್ಣಗೊಂಡ ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; }
ಅಂತಿಮ ಫಲಿತಾಂಶ
ಹಾಗಾದರೆ ಏನು ಇದು ಕೊನೆಯಲ್ಲಿ ಕಾಣಿಸುತ್ತದೆಯೇ?
ಇಂತಹದ್ದೇನಾದರೂ:
ನೀವು ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಬಳಸಲು ಹಲವು ಮಾರ್ಗಗಳಿವೆ - ನಿಮ್ಮ ಸೃಜನಶೀಲತೆ ಹಿಡಿತಕ್ಕೆ ಬರಲಿ ಮತ್ತು ನೀವು ಏನು ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ನೋಡಿ.
ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸೇರಿಸುವುದು
ಮೇಲಿನ ಉದಾಹರಣೆಗಳ ಹೊರತಾಗಿ, ವಿಭಿನ್ನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮ್ಮ ಬ್ಯಾಕೆಂಡ್ನಲ್ಲಿ ನೀವು ಡ್ಯಾಶಿಕಾನ್ಗಳನ್ನು ಬಳಸಬಹುದುವಿಭಿನ್ನ ಪೋಸ್ಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಐಕಾನ್ಗಳು, ಅಥವಾ ನೀವು ಅವುಗಳನ್ನು ನಿಮ್ಮ ಪೋಸ್ಟ್ ಶೀರ್ಷಿಕೆಗಳಲ್ಲಿ, ವಿಜೆಟ್ ಶೀರ್ಷಿಕೆಗಳಲ್ಲಿ ಬಳಸಬಹುದು ಅಥವಾ ನೀವು ಕಸ್ಟಮ್ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟವನ್ನು ರಚಿಸುತ್ತಿದ್ದರೆ ನಿಮ್ಮ ಸೈಟ್ನ ವಿವಿಧ ಪುಟಗಳ ನಡುವೆ ನೀವು ವ್ಯತ್ಯಾಸವನ್ನು ಮಾಡಬಹುದು.
ಇಲ್ಲಿ ಯಾವುದರ ಮೂಲ ಉದಾಹರಣೆಯಾಗಿದೆ ನೀವು ರಚಿಸಲು ಅವುಗಳನ್ನು ಬಳಸಬಹುದು: