ವರ್ಡ್ಪ್ರೆಸ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಸರಿಯಾಗಿ ಪರಿಚಯಿಸುತ್ತದೆ?JS ಮತ್ತು CSS ಫೈಲ್‌ಗಳ ಕಸ್ಟಮ್ ಲೋಡ್

ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ವರ್ಡ್ಪ್ರೆಸ್ ಬಳಸುವ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳು ವರ್ಡ್ಪ್ರೆಸ್ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಅಥವಾ ವರ್ಡ್ಪ್ರೆಸ್ ಥೀಮ್‌ಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುವಾಗ ಕೆಲವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು CSS ಸ್ಕ್ರಿಪ್ಟ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತಾರೆ.

WordPress HTML ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (JS) ಮತ್ತು CSS ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ

  • ಸಾಮಾನ್ಯವಾಗಿ, ಜನರು ನೇರವಾಗಿ HTML ಗಾಗಿ ಲಿಂಕ್, ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ.
  • ವಾಸ್ತವವಾಗಿ, ವರ್ಡ್ಪ್ರೆಸ್ ಅಂತರ್ನಿರ್ಮಿತ ಅತ್ಯಾಧುನಿಕ ಕಾರ್ಯಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸುವ ವಿಧಾನಗಳನ್ನು ಹೊಂದಿದೆ.
  • ಆದ್ದರಿಂದ, ವರ್ಡ್ಪ್ರೆಸ್ನ ಅಂತರ್ನಿರ್ಮಿತ ವಿಧಾನದ ಉಲ್ಲೇಖಗಳನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ವೃತ್ತಿಪರ ಮತ್ತು ಹೆಚ್ಚು ವಿಸ್ತಾರವಾಗಿದೆ.

ದೋಷಪೂರಿತ ಉಲ್ಲೇಖ ವಿಧಾನ

ಎರಡು ಸಾಮಾನ್ಯ ಉಲ್ಲೇಖ ವಿಧಾನಗಳಿವೆ, ಇದು ಉತ್ತಮವಾಗಿದೆ, ಇದು ಪರಿಪೂರ್ಣ ಅಥವಾ ಸಮಂಜಸವಲ್ಲ.

ವಿಧಾನ 1: CSS ಫೈಲ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸಲು ಲಿಂಕ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು

  • ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್‌ಗಳು JS ಫೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತವೆ.ಇಲ್ಲಿ ವಿವರವಾಗಿಲ್ಲ.

ವಿಧಾನ 2: wp_head ಕಾರ್ಯವನ್ನು ಬಳಸಿ

  • wp_head ಕಾರ್ಯವನ್ನು ಕೆಲವು ಕಸ್ಟಮ್ ಅಥವಾ ಸಿಸ್ಟಮ್-ವ್ಯಾಖ್ಯಾನಿತ ವಿಷಯವನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ.
  • ಈ ಫೈಲ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸಲು ನಾವು ಕೆಲವೊಮ್ಮೆ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ:
<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>
  • ಅನುಗುಣವಾದ ಫೈಲ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು ಮೇಲಿನ ಕೋಡ್ ಅನ್ನು functions.php ಫೈಲ್‌ಗೆ ನಕಲಿಸಿ.

ವರ್ಡ್ಪ್ರೆಸ್ ಎನ್ಕ್ಯೂ ಸ್ಕ್ರಿಪ್ಟ್ಗಳ ಸಂಪನ್ಮೂಲ ಕಾರ್ಯವಿಧಾನ

ನಮಗೆ ತಿಳಿದಿರುವಂತೆ, ವರ್ಡ್ಪ್ರೆಸ್ ಬಹಳಷ್ಟು ಪ್ಲಗಿನ್‌ಗಳನ್ನು ಹೊಂದಿದೆ:

  • ಪ್ರತಿಯೊಂದು ಪ್ಲಗಿನ್ ಕೆಲವು ಸಂಪನ್ಮೂಲ ಫೈಲ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತದೆ.
  • ಅನಿವಾರ್ಯವಾಗಿ, ಎರಡು ಪ್ಲಗಿನ್‌ಗಳಿಂದ ಉಲ್ಲೇಖಿಸಲಾದ ಸಂಪನ್ಮೂಲಗಳ ನಡುವೆ ಘರ್ಷಣೆಗಳು ಉಂಟಾಗುತ್ತವೆ, ಅದು ಅಸ್ಥಿರವಾಗುತ್ತದೆ ಮತ್ತು ದಕ್ಷತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.

wp_enqueue_script ಕಾರ್ಯವನ್ನು ಬಳಸಿ

  • WordPress ನಲ್ಲಿ ಸಂಪನ್ಮೂಲವನ್ನು ಉಲ್ಲೇಖಿಸಲು ನೀವು ಬಳಸಬೇಕುwp_enqueue_scriptಎನ್ಕ್ಯೂ ಮಾಡಲಾದ ಅಥವಾ ವಿಂಗಡಿಸಲಾದ ಕಾರ್ಯದ ಹೆಸರಿನಲ್ಲಿ ಎನ್ಕ್ಯೂ ಪದವನ್ನು ಹೊಂದಿರುವ ಕಾರ್ಯ.
  • ವರ್ಡ್‌ಪ್ರೆಸ್‌ನ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಎನ್‌ಕ್ಯೂ ಮಾಡುವ ವಿಧಾನದೊಂದಿಗೆ (ಎನ್‌ಕ್ಯೂ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು), ಉಲ್ಲೇಖಗಳನ್ನು ಅನುಗುಣವಾದ ಫೈಲ್‌ಗಳು ಮತ್ತು ಕೋರ್ ಕೋಡ್‌ನಿಂದ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ.
  • ಬಳಕೆದಾರರು ಸಂಪನ್ಮೂಲವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಬಯಸಿದರೆ, ಅವರು ಅದನ್ನು ಕೋರ್ ಕೋಡ್‌ನಿಂದ ಮಾರ್ಪಡಿಸದೆಯೇ ಅಳಿಸಬಹುದು, ಮಾರ್ಪಡಿಸಬಹುದು ಮತ್ತು ಕಾಮೆಂಟ್ ಮಾಡಬಹುದು.

ಅಲ್ಲದೆ, jQuery, jQuery UI, ಇತ್ಯಾದಿಗಳಂತಹ ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಕೆಲವು ಲೈಬ್ರರಿಗಳನ್ನು WordPress ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ.

ಅಂತರ್ನಿರ್ಮಿತ ಲೈಬ್ರರಿಗೆ ನೇರವಾಗಿ ಕರೆ ಮಾಡಲು ನಾವು wp_enqueue_script ಕಾರ್ಯವನ್ನು ಬಳಸಬಹುದು, ಇದು ಕೋಡ್ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ವಿವರಣೆಯನ್ನು ಉಳಿಸುತ್ತದೆ.

ಅಂತರ್ನಿರ್ಮಿತ ವ್ಯಾಖ್ಯಾನ ಗ್ರಂಥಾಲಯಗಳು ಮತ್ತು ಗುರುತಿಸುವಿಕೆಗಳ (ಹ್ಯಾಂಡಲ್‌ಗಳು) ಪಟ್ಟಿಯನ್ನು ಇಲ್ಲಿ ಒದಗಿಸಲಾಗಿದೆ

ನಿಮ್ಮ ಸ್ವಂತ JS ಮತ್ತು CSS ಫೈಲ್‌ಗಳನ್ನು ಉಲ್ಲೇಖಿಸಲು ನೀವು ಈ ಕಾರ್ಯವನ್ನು ಬಳಸಿದರೆ, ನೀವು ಬಳಸಬೇಕಾಗುತ್ತದೆwp_register_scriptಕಾರ್ಯವು ಗುರುತಿಸುವಿಕೆಯನ್ನು (ಹ್ಯಾಂಡಲ್) ನೋಂದಾಯಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ಬಳಸುತ್ತದೆwp_enqueue_scriptಕಾರ್ಯವು ಈ ಧ್ವಜಕ್ಕೆ ಅನುಗುಣವಾದ ಸಂಪನ್ಮೂಲವನ್ನು ಕರೆಯುತ್ತದೆ.

ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ JS ಮತ್ತು CSS ಫೈಲ್ಗಳನ್ನು ಸರಿಯಾಗಿ ಆಮದು ಮಾಡುವುದು ಹೇಗೆ?

ವರ್ಡ್ಪ್ರೆಸ್ JS ಮತ್ತು CSS ವಿಧಾನಗಳಿಗೆ ಸಂವೇದನಾಶೀಲ ಆಮದು ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಪ್ಲಗಿನ್ ▼ ಗೆ plugin.css ಫೈಲ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ನೀವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಬಹುದು

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

ಐಡೆಂಟಿಫೈಯರ್ ಪ್ಲಗಿನ್_ಸ್ಟೈಲ್‌ಶೀಟ್‌ನೊಂದಿಗೆ ಸಂಪನ್ಮೂಲವನ್ನು ರಚಿಸಲು ಮೇಲಿನವು wp_register_script ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತದೆ.

ನಂತರ, ಅದರ ಸರದಿಯಲ್ಲಿರುವ ವಿನಂತಿಗಳನ್ನು ಸೇರಿಸಿwp_enqueue_scriptsಕ್ರಮಗಳು ಕಾರ್ಯಾಚರಣೆಯಲ್ಲಿವೆ.

ಕಾರ್ಯದ ಹೆಸರು ಸ್ಕ್ರಿಪ್ಟ್ ಆಗಿರುವಾಗ, ಇದು ಸಂಪನ್ಮೂಲ ಫೈಲ್ ಪ್ರಕಾರದೊಂದಿಗೆ ಯಾವುದೇ ಸಂಬಂಧವನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು CSS ಮತ್ತು JS ಎರಡಕ್ಕೂ ಮಾನ್ಯವಾಗಿರುತ್ತದೆ.

wp_register_script ಕಾರ್ಯವು ನಿಜವಾಗಿಯೂ ಸರಳವಾಗಿಲ್ಲ, ಇದು ಐದು ನಿಯತಾಂಕಗಳನ್ನು ಹೊಂದಬಹುದು:

1) $ಹ್ಯಾಂಡಲ್: ಸಂಪನ್ಮೂಲ ಗುರುತಿಸುವಿಕೆ.

  • 由wp_enqueue_scriptವರ್ಗಾವಣೆ.

೨) $src: ಸಂಪನ್ಮೂಲದ ಸ್ಥಳ.

  • ಸಂಬಂಧಿತ ಅಥವಾ ಸಂಪೂರ್ಣ ವಿಳಾಸಗಳು ವಿಳಾಸಗಳನ್ನು ಪಡೆಯಲು ವರ್ಡ್ಪ್ರೆಸ್ ಅಂತರ್ನಿರ್ಮಿತ ಕಾರ್ಯಗಳನ್ನು ಬಳಸುತ್ತವೆ, ಇತ್ಯಾದಿ.
  • ಸಾಮಾನ್ಯಸ್ಥಾನೀಕರಣಕಾರ್ಯವನ್ನು ಹೊಂದಿದೆplugins_url,get_template_directory_uri等.

3) $deps: ಅವಲಂಬನೆ.

  • ನೀವು jQuery ಪ್ಲಗಿನ್ ಅನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನಿರ್ಮಿಸಲು jQuery ಅನ್ನು ಅವಲಂಬಿಸಬೇಕಾದರೆ, ನೀವು jQuery ಅನ್ನು ಭರ್ತಿ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
  • ಇದು ರಚನೆಯಾಗಿ ರವಾನಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

4) $ver: ಸಂಪನ್ಮೂಲ ಆವೃತ್ತಿ, ಐಚ್ಛಿಕ.

5) $in_footer: ಅದನ್ನು ಕೆಳಭಾಗದಲ್ಲಿ ಇಡಬೇಕೇ?

  • ಸಾಮಾನ್ಯವಾಗಿ, JS ಫೈಲ್‌ಗಳನ್ನು ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿ ಇರಿಸಬೇಕು, ನೀವು ಈ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಸರಿ ಎಂದು ಹೊಂದಿಸಬಹುದು, ಮೇಲ್ಭಾಗಕ್ಕೆ ಔಟ್‌ಪುಟ್ ಮಾಡಲು ಖಾಲಿ ಅಥವಾ ತಪ್ಪು ಬಿಡಿ.

ಹೆಚ್ಚು ಸಂಪೂರ್ಣವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಉಲ್ಲೇಖ ಉದಾಹರಣೆ ▼ ಅನ್ನು ನೋಡೋಣ

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

ವರ್ಡ್ಪ್ರೆಸ್ ಥೀಮ್‌ಗಳು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು wp_enqueue_script ಅನ್ನು ಬಳಸುತ್ತವೆ

ವರ್ಡ್ಪ್ರೆಸ್ ಥೀಮ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಪ್ರೋಗ್ರಾಮರ್ಗಳು, ಬಳಕೆwp_enqueue_scriptಸಂಪನ್ಮೂಲಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ.

  • ಮೇಲಿನ ಉದಾಹರಣೆಗಳು WordPress ಪ್ಲಗಿನ್ ಅಭಿವೃದ್ಧಿಗೆ ಉಲ್ಲೇಖಿತ ಸಂಪನ್ಮೂಲಗಳ ಉದಾಹರಣೆಗಳಾಗಿವೆ.
  • ವಿಷಯದಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲಾದ ವಿಧಾನವು ಹೋಲುತ್ತದೆ.

ಥೀಮ್ ಅಡಿಯಲ್ಲಿ ಸಂಪನ್ಮೂಲ ಫೈಲ್ ವಿಳಾಸವನ್ನು ಪಡೆಯಲು ಥೀಮ್ ಡೈರೆಕ್ಟರಿಯನ್ನು ಪಡೆಯಲು ಅನುಗುಣವಾದ ಕಾರ್ಯವನ್ನು ಬಳಸುವುದು ಮುಖ್ಯ ವ್ಯತ್ಯಾಸವಾಗಿದೆ.

ನೀವು ಬಳಸಬಹುದುget_template_directory_uriಪ್ರಸ್ತುತ ಥೀಮ್ ಡೈರೆಕ್ಟರಿಯನ್ನು ಪಡೆಯಲು ಕಾರ್ಯ.

ನೀವು ಮಕ್ಕಳ ಥೀಮ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಬಳಸಬೇಕಾಗುತ್ತದೆget_stylesheet_directory_uriಕಾರ್ಯವು ಅನುಗುಣವಾದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪಡೆಯಲು ಪೋಷಕ ಥೀಮ್‌ನ ಡೈರೆಕ್ಟರಿಯನ್ನು ಪಡೆಯುತ್ತದೆ.

ಚೆನ್ ವೈಲಿಯಾಂಗ್ ಅವರ ಬ್ಲಾಗ್‌ನಲ್ಲಿ ( https://www.chenweiliang.com/ ) ಹಂಚಿಕೊಂಡಿರುವ "ವರ್ಡ್ಪ್ರೆಸ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸರಿಯಾಗಿ ಪರಿಚಯಿಸುವುದು ಹೇಗೆ? JS ಮತ್ತು CSS ಫೈಲ್‌ಗಳ ಕಸ್ಟಮ್ ಲೋಡಿಂಗ್" ಎಂಬ ಲೇಖನವು ನಿಮಗೆ ಸಹಾಯಕವಾಗಲಿದೆ ಎಂದು ಆಶಿಸುತ್ತೇವೆ.

ಈ ಲೇಖನದ ಲಿಂಕ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಹಿಂಜರಿಯಬೇಡಿ: https://www.chenweiliang.com/cwl-950.html

ಇನ್ನಷ್ಟು ಗುಪ್ತ ತಂತ್ರಗಳನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಲು 🔑, ನಮ್ಮ ಟೆಲಿಗ್ರಾಮ್ ಚಾನಲ್‌ಗೆ ಸೇರಲು ಸ್ವಾಗತ!

ಇಷ್ಟವಾದಲ್ಲಿ ಶೇರ್ ಮಾಡಿ ಮತ್ತು ಲೈಕ್ ಮಾಡಿ! ನಿಮ್ಮ ಹಂಚಿಕೆಗಳು ಮತ್ತು ಇಷ್ಟಗಳು ನಮ್ಮ ನಿರಂತರ ಪ್ರೇರಣೆ!

 

ಪ್ರತಿಕ್ರಿಯೆಗಳು

您的邮箱地址不会被公开。必填项已用*标注

ಟಾಪ್ ಗೆ ಸ್ಕ್ರೋಲ್