Insert PHP Code Snippet
- WordPress.org Plugin Page : https://wordpress.org/plugins/insert-php-code-snippet/
- by xyzscripts.com
- Version : 1.3.3
- Last updated : 5 months ago
- Active installations : 100,000+
- WordPress Version : 2.8 or higher
- Tested up to : 5.9.3
Description
A quicklook into Insert PHP Code Snippet
★ Convert PHP snippets to shortcodes
★ Insert PHP code easily using shortcode
★ Support for PHP snippet shortcodes in widgets
★ Dropdown menu in TinyMCE editor to pick snippet shortcodes easily
FEATURES IN DETAIL
Insert PHP Code Snippet allows you to create shortcodes corresponding to PHP code snippets. You can create a shortcode corresponding to any random PHP code such as ad codes, login validation etc. and use the same in your posts, pages or widgets.
The shortcodes generated using the plugin are easily available as a dropdown in the standard wordpress content editor as well as in widget settings, thereby giving you ease of integrating your PHP snippets with your posts and pages.
- Screenshot :
Insert Headers and Footers
- WordPress.org Plugin Page : https://wordpress.org/plugins/insert-headers-and-footers/
- By WPBeginner
- Version: 1.4.3
- Last updated: 6 months ago
- Active installations: 600,000+
- WordPress Version: 3.6 or higher
- Tested up to: 4.9.8
Description :
EASILY INSERT HEADER AND FOOTER CODE
Insert Headers and Footers is a simple plugin that lets you insert code like Google Analytics, custom CSS, Facebook Pixel, and more to your WordPress site header and footer. No need to edit your theme files!
The simple interface of the Insert Headers and Footers plugin gives you one place where you can insert scripts, rather than dealing with dozens of different plugins.
FEATURES OF INSERT HEADERS AND FOOTERS :
- Quick to set up
- Simple to insert scripts
- Insert header code and/or footer code
- Add Google Analytics code to any theme
- Add custom CSS across themes
- Insert Facebook pixel code
- Insert any code or script, including HTML and Javascript
- Screenshot :
Header and Footer Scripts
- WordPress.org Plugin Page : https://wordpress.org/plugins/header-and-footer-scripts/
- By Digital Liberation
- Version: 2.1.0
- Last updated: 11 months ago
- Active installations: 90,000+
- WordPress Version: 4.0 or higher
- Tested up to: 4.9.8
- PHP Version: 5.3 or higher
- Description :
If you are running a WordPress site then sooner or later you need to insert some kind of code to your website. It is most likley a web analytics code like Google Analytics or may be social media script or some CSS stylesheet or may be Custom fonts. This plugin will do all the magic. Even if you want to insert those codes in a custom post type.
All you have to do is adding appropriate html code.
Don't forget to wrap your code with proper tags.
<script type="text/javascript">
YOUR JS CODE HERE
</script>
Or for CSS:
<style type="text/css">
YOUR CSS CODE HERE
</style>
WHY USE THIS PLUGIN:
- To insert CSS and JavaScript codes to <head> or before </body>.
- To insert code to <head> of any single page or post.
- To insert code to Custom Post Type [New Feature].
- The plugin should be compatible with WooCommerce.
Scripts n Styles
- WordPress.org Plugin Page : https://wordpress.org/plugins/scripts-n-styles/
- by unFocus Projects
- Version: 3.4.5
- Last updated: 3 weeks ago
- Active installations: 30,000+
- WordPress Version: 4.9.8 or higher
- Tested up to: 5.0
- Description :
This plugin allows Admin users the ability to add custom CSS and JavaScript directly into individual Post, Pages or any other registered custom post types. You can also add classes to the body tag and the post container. There is a Global settings page for which you can write Scripts n Styles for the entire blog.
Admin’s can also add classes to the TinyMCE “Formats” dropdown which users can use to style posts and pages directly. As of Scripts n Styles 3+ styles are reflected in the post editor.
Because only well trusted users should ever be allowed to insert JavaScript directly into the pages of your site, this plugin restricts usage to admin type users. Admin’s have access to even more sensitive areas by definition, so that should be relatively safe
- Screenshot :
Scripts To Footer
- WordPress.org Plugin Page : https://wordpress.org/plugins/scripts-to-footerphp/
- by Joshua David Nelson
- Version: 0.6.3
- Last updated: 3 months ago
- Active installations: 20,000+
- WordPress Version: 3.1.0 or higher
- Tested up to: 4.9.8
- Description :
This small plugin moves scripts to the footer. Note that this only works if you have plugins and a theme that utilizes wp_enqueue_scripts correctly.
You can disable the plugin on specific pages and posts directly via the post/page edit screen metabox.
You can disable the plugin on specific archive pages (blog page, search page, post type and taxonomy archives) via the settings page.
- Screenshot :
JavaScript to Footer
- WordPress.org Plugin Page : https://wordpress.org/plugins/footer-javascript/
- By Vladimir Prelovac
- Version: 0.4.1
- Last updated: 4 years ago
- Active installations: 3,000+
- WordPress Version: 2.3 or higher
- Tested up to: 4.2.21
Description :
The Yahoo! Exceptional Performance team recommends placing scripts at the bottom of your page because of the way browsers download components.
“The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.”
WordPress default behavior is to load javascript in the page.
This plugin will move all javascript code to the footer if the plugins have declared javascript properly.
Plugin by Vladimir Prelovac. Looking for WordPress Services?
Ways to insert Custom JavaScript into WordPress pages or posts
(1) Load a separate JavaScript file using WordPress’ script loader
(2) Use the wp_footer or wp_head hooks to add the script inline
(3) Use a plugin to add header or footer scripts
(4) Modify your theme to include the script (bad idea)
(5) Use the WordPress post editor (really bad idea not worth discussing)
Adding JavaScript Inline With WordPress Hooks
(1) Add PHP to your footer
// Add scripts to wp_footer()
function child_theme_footer_script() {
// Your PHP goes here
}
add_action( 'wp_footer', 'child_theme_footer_script' );
(2) Add HTML to your header, footer
<?php
/**
Add scripts to wp_header()
*/
add_action( 'wp_head', 'my_header_scripts' );
function my_header_scripts(){
?>
<script>alert( 'Hi Roy' ); </script>
<?php
}
<?php
/**
Add scripts to wp_footer()
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
<script>alert( 'Hi Roy' ); </script>
<?php
}
or
// Add scripts to wp_footer()
function child_theme_footer_script() { ?>
<!-- Your HTML goes here -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );
How To Include A JavaScript File In WordPress The Right Way
아래은 wp_enqueue_scripts를 사용하여 하위 테마의 기본 디렉토리에 있는 "custom-scripts.js"라는 스크립트를 로드하는 예입니다.
add_action( 'wp_enqueue_scripts', 'my_custom_script_load' );
function my_custom_script_load(){
wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/custom-scripts', array( 'jquery' ) );
}
(6) Disable WordPress filtering of script tags
JavaScript 내에서 스크립트 태그 차단을 사용 중지할 수 있습니다. wp-config.php에서 다음 코드 줄을 추가하여 사용자 정의 태그를 활성화해야합니다.
define( 'CUSTOM_TAGS', true );
functions.php 페이지에서 다음 코드를 추가할 수 있습니다 :
function add_scriptfilter( $string ) {
global $allowedtags;
$allowedtags['script'] = array( 'src' => array () );
return $string;
}
add_filter( 'pre_kses', 'add_scriptfilter' );
Note: Once again, we have to warn against using the above method. Enabling the script tag via this method disables the security feature sitewide for any user permission level. (이 방법을 통해 script 태그를 활성화하면 모든 사용자 권한 수준의 보안 기능이 비활성화됩니다.)
(7) Use Advanced Custom Fields
Advanced Custom Fields는 많은 코드를 개발할 필요없이 사용자 정의 필드를 구현할 수있는 널리 사용되는 플러그인입니다.
Conclusion :
플러그인 사용을 하지않고 효율적 커스텀 js 로딩을 위해 wp_footer 혹은 wp_head 훅을 이용
(1) child theme의 functions.php 페이지에서 다음 function을 추가
add_action('wp_footer', 'CustomJS');
function CustomJS( ) {
echo '<script src="/wp-content/themes/your-child-theme/custom.js"></script>';
}
(2) custom.js을 에디팅하여 이용
- 출처 : https://calderaforms.com/2016/11/how-to-load-custom-javascript-in-wordpress/
- 출처 (6), (7) : https://www.godaddy.com/garage/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/
- 출처 : http://volatylthemes.com/footer/
- [Wordpress] wp_footer() function : http://webtip.tistory.com/entry/Wordpress-wpfooter-function?category=827739
'WordPress > Plugin' 카테고리의 다른 글
| [WordPress Plugin] KBoard mod (0) | 2018.12.24 |
|---|---|
| [WordPress Plugin] WP Mail Logging / Email Log (0) | 2018.12.08 |
| [WordPress Plugin] 한국형 워드프레스 게시판 플러그인 (0) | 2018.11.29 |
| [WordPress Plugin] Health Check & Troubleshooting (0) | 2018.11.28 |
| [WordPress Plugin] WooCommerce PayPal Powered by Braintree Gateway (0) | 2018.11.28 |
