Quảng cáo chạy dọc hai bên trang web sẽ làm tô điểm cho website của bạn đẹp hơn và cũng là nguồn thu quảng cáo dành cho website của bạn (nếu website đủ khả năng ).



Hôm tập tành làm web bằng wordpress đi tìm kiếm cái code dành cho banner chạy dọc hai bên trang web mình tìm được code của bạn Nguyen Duc Manh nên giờ về chia sẽ lại cho những ai là vọc sỹ như mình dùng thử chơi.

Trong code này mình đã chỉnh sửa một số cái như là thêm chức năng post ảnh lên hay lấy ảnh từ thư viện ảnh của wordpress của bạn thay vì dán đường link ảnh vào. và kết hợp một số code để ẩn banner đi khi màn hình nhỏ hơn kích thước mong muốn.

Dĩ nhiên với trình độ vọc sỹ như mình thì việc sửa code chỉ nằm ở mức độ code chạy được mà thôi  chứ không thể nào perfect được.

Ví như mình phải làm 2 cái function cho việc load ảnh lên thay vì dùng một cái (vì mình không phải là dân học web nên không biết cách dùng 1 function cho cả 2 công việc).

Nếu bạn thích code này thì có thể dùng còn không thích thì cũng không sao, các bạn có thể vào link bên dưới để tải bản gốc của nó về và dùng hay sửa theo ý của bạn (như mình đã sửa :d)

Code js:

copy và lưu file với tên floatqcao.js

Code:

//++++ Quang cao chay doc 2 ben

  function FloatTopDiv()  
    {  
       startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftQCjust , startLY = TopQCjust+80;  
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightQCjust , startRY = TopQCjust+80;  
        var d = document;  
        function ml(id)  
        {  
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];  
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};  
            el.x = startRX;  
            el.y = startRY;  
            return el;  
        }  
        function m2(id)  
        {  
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];  
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};  
            e2.x = startLX;  
            e2.y = startLY;  
            return e2;  
        }  
        window.stayTopLeft=function()  
        {  
            if (document.documentElement && document.documentElement.scrollTop)  
                var pY =  document.documentElement.scrollTop;  
            else if (document.body)  
                var pY =  document.body.scrollTop;  
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopQCjust;startRY = TopQCjust;};  
            ftlObj.y += (pY+startRY-ftlObj.y)/16;  
            ftlObj.sP(ftlObj.x, ftlObj.y);  
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;  
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);  
            setTimeout("stayTopLeft()", 1);  
        }  
        ftlObj = ml("divQCRight");  
        //stayTopLeft();  
        ftlObj2 = m2("divQCLeft");  
        stayTopLeft();  
    }  
    function ShowQCDiv()  
    {  
        var objQCDivRight = document.getElementById("divQCRight");  
        var objQCDivLeft = document.getElementById("divQCLeft");    
        if (document.body.clientWidth < 1477)  
        {  
            objQCDivRight .style.display = "none";  
            objQCDivLeft.style.display = "none";  
        }  
        else  
        {  
            objQCDivRight.style.display = "block";  
            objQCDivLeft.style.display = "block";  
            FloatTopDiv();  
        }  
    }

Code PHP :

lưu file lại với tên float_left_right_qcao.php

Code:

<?php
/**
 Plugin Name: Float Left Right Advertising
 Plugin URI: http://blog.casanova.vn/float-left-right-advertising/
 Version: 2.0
 Description: <strong>[CASANOVA]</strong> Float Advertising on Left and Right, qcao scroll up/down when user scroll page up/down. Support multi setting: width of left banner, width of right banner, margin-top, margin-left, margin-right and HTML code for banner. After active this plugin please goto <strong>Settings</strong> --> <strong><a href="options-general.php?page=float_qcao.php">Float Left Right Advertising</a></strong> and config your Advertising.
 Author: Nguyen Duc Manh
 Author URI: http://casanova.vn
*/


/*****************Frontend****************************************/
function load_csnv_script(){
 if(get_option('csnv_is_active') && (get_option('csnv_left_code') || get_option('csnv_right_code')) ){
 wp_enqueue_script( 'jquery' );
 wp_enqueue_script(
 'floatqcao.js',
 plugins_url('/floatqcao.js', __FILE__),
 '',
 '',
 false
 );
 add_action('wp_footer', 'append_code_to_body');
 }
}



function append_code_to_body(){
?>
 <?php
 $MainContentW = get_option("csnv_content_w")?get_option("csnv_content_w"):1000;
 
 //Width + height
 $LeftBannerW = get_option("csnv_left_w")?get_option("csnv_left_w"):100;
 $LeftBannerH = get_option("csnv_left_h")?get_option("csnv_left_h"):500;
 
 $RightBannerW = get_option("csnv_right_w")?get_option("csnv_right_w"):100;
 $RightBannerH = get_option("csnv_right_h")?get_option("csnv_right_h"):500;
 
 
 //Ajust
 $LeftQCjust = get_option("csnv_margin_left")?get_option("csnv_margin_left"):10;
 $RightQCjust = get_option("csnv_margin_right")?get_option("csnv_margin_right"):10;
 $TopQCjust = get_option("csnv_margin_top")?get_option("csnv_margin_top"):80;
 
 ?>
    
 <script type="text/javascript">

                document.write('<div id="divQCLeft" style="position: absolute; top: 0px; width:<?php echo $LeftBannerW; ?>px; <?php if($LeftBannerH) echo "height:".$LeftBannerH."px;"; ?> overflow:hidden;"><a href="<?php echo html_entity_decode(get_option('csnv_left_code')); ?>" target="_blank"><img src="<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_left'));?>"></img></a></div><div id="divQCRight" style="position: absolute; top: 0px; width:<?php echo $RightBannerW; ?>px; <?php if($RightBannerH) echo "height:".$RightBannerH."px;"; ?> overflow:hidden;"><a href="<?php echo html_entity_decode(get_option('csnv_right_code')); ?>" target="_blank"><img src="<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_right'));?>"></img></a></div>');
                
                var MainContentW = <?php echo $MainContentW; ?>;
                var LeftBannerW = <?php echo $LeftBannerW; ?>;
                var RightBannerW = <?php echo $RightBannerW; ?>;
                var LeftQCjust = <?php echo $LeftQCjust; ?>;
                var RightQCjust = <?php echo $RightQCjust; ?>;
                var TopQCjust = <?php echo $TopQCjust; ?>;
                ShowQCDiv();
                window.onresize=ShowQCDiv;

        </script>
    
<?php
}


add_action('init', 'load_csnv_script');

/************Admin Panel***********/
function csnv_qcao_plugin_remove(){
 delete_option('csnv_is_active');
 delete_option('screen_w');
 
 delete_option('csnv_content_w');
 delete_option('csnv_left_w');
 delete_option('csnv_left_h');
 delete_option('csnv_right_w');
 delete_option('csnv_right_h');
 delete_option('csnv_margin_left');
 delete_option('csnv_margin_right');
 delete_option('csnv_margin_top');
 delete_option('csnv_left_code');
 delete_option('csnv_right_code');
 delete_option('mobile_show');
}
function csnv_qcao_plugin_install(){
 add_option('csnv_is_active',1);
 add_option('screen_w','1024');
 add_option('csnv_content_w','1000');
 
 add_option('csnv_left_w','100');
 add_option('csnv_left_h','500');
 
 add_option('csnv_right_w','100');
 add_option('csnv_right_h','500');
 
 add_option('csnv_margin_left','10');
 add_option('csnv_margin_right','10');
 add_option('csnv_margin_top','80');
 add_option('mobile_show','0');
 
 add_option('csnv_left_code','<a href="http://yourwebsite.com" target="_blank"><img src="'.plugins_url('/leftbanner.jpg', __FILE__).'"  width ="100" alt="" /></a>');
 add_option('csnv_right_code','<a href="http://yourwebsite.com" target="_blank"><img src="'.plugins_url('/rightbanner.jpg', __FILE__).'"  width ="100" alt="" /></a>');
}


function csnv_qcao_menu() {
 add_options_page( __('QCao chay hai ben',''), __('QCao chay hai ben',''), 8, basename(__FILE__), 'csnv_qcao_setting');
}
function csnv_qcao_setting(){
 wp_enqueue_media();

 if($_POST['status_submit']==1){
 update_option('csnv_is_active',intval($_POST['csnv_is_active']));
 update_option('csnv_left_code',htmlentities(stripslashes($_POST['csnv_left_code'])));
 update_option('csnv_right_code',htmlentities(stripslashes($_POST['csnv_right_code'])));

 update_option( 'media_selector_attachment_id_left', absint( $_POST['image_attachment_id_left'] ) );
 update_option( 'media_selector_attachment_id_right', absint( $_POST['image_attachment_id_right'] ) );
 
 update_option('csnv_content_w',intval($_POST['csnv_content_w']));
 
 update_option('csnv_left_w',intval($_POST['csnv_left_w']));
 update_option('csnv_left_h',intval($_POST['csnv_left_h']));
 
 update_option('csnv_right_w',intval($_POST['csnv_right_w']));
 update_option('csnv_right_h',intval($_POST['csnv_right_h']));
 
 update_option('csnv_margin_left',intval($_POST['csnv_margin_left']));
 update_option('csnv_margin_right',intval($_POST['csnv_margin_right']));
 update_option('csnv_margin_top',intval($_POST['csnv_margin_top']));
 
 echo '<div id="message" class="updated fade"><p>Your settings were saved !</p></div>';
 }
 if($_POST['status_submit']==2){
 update_option('csnv_is_active',1);

 update_option('csnv_content_w','1000');

 update_option('csnv_left_w','100');
 update_option('csnv_left_h','500');
 
 update_option('csnv_right_w','100');
 update_option('csnv_right_h','500');
 
 update_option('csnv_margin_left','10');
 update_option('csnv_margin_right','10');
 update_option('csnv_margin_top','80');
 
 update_option('csnv_left_code','<a href="http://yourwebsite.com" target="_blank"><img src="'.plugins_url('/leftbanner.jpg', __FILE__).'" width ="100" alt="" /></a>');
 update_option('csnv_right_code','<a href="http://yourwebsite.com" target="_blank"><img src="'.plugins_url('/rightbanner.jpg', __FILE__).'"  width ="100" alt="" /></a>');
 
 echo '<div id="message" class="updated fade"><p>Your settings were reset !</p></div>';
 }
 ?>
 <h2>Float Left Right Advertising Setting</h2>
 <form method="post" id="csnv_options">
     <input type="hidden" name="status_submit" id="status_submit" value="2"  />
 <table width="100%" cellspacing="2" cellpadding="5" class="editform">
 <tr valign="top">
 <td width="150" scope="row">Active plugin:</td>
 <td>
                 <label><input type="radio" name="csnv_is_active" <?php if (get_option('csnv_is_active')=='1'):?> checked="checked"<?php endif;?> value="1" />Yes</label>
                    <label><input type="radio" name="csnv_is_active" <?php if (get_option('csnv_is_active')=='0'):?> checked="checked"<?php endif;?> value="0" />No</label>
 </td>
 </tr>
            
            <tr valign="top">
 <td  scope="row">Main content width:<br /><small>Width of your website</small></td>
 <td scope="row">
 <input name="csnv_content_w" size="4" maxlength="4" value="<?php echo html_entity_decode(get_option('csnv_content_w'));?>" /> px (number only)
 </td>
 </tr>
            
          
            <tr valign="top">
 <td  scope="row">Banner Left:</td>
 <td scope="row">
                 <table cellspacing="10">
                     <tr>
                         <td>
                             <label>Width: <input name="csnv_left_w" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_left_w'));?>" /> px
                                <br /><small>Width of your left banner</small>
                                </label>
                            </td>
                            <td>
                             <label>Height: <input name="csnv_left_h" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_left_h'));?>" /> px
                                <br /><small>Height of your left banner</small>
                                </label>
                            </td>
                        </tr>
                    </table>
 </td>
 </tr>
            
            <tr valign="top">
 <td  scope="row">Banner Right </td>
 <td scope="row">
                 <table cellspacing="10">
                     <tr>
                         <td><label>Width:
 <input name="csnv_right_w" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_right_w'));?>" /> px <br /><small>Width of your right banner</small>
                    </label></td>
                     <td>
                         <label>Height:
 <input name="csnv_right_h" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_right_h'));?>" /> px<br /><small>Height of your right banner</small>
                    </label>
                        </td>
                        </tr>
                    </table>
                
 </td>
 </tr>
            
            <tr valign="top">
 <td  scope="row">Margin Left:</td>
 <td scope="row">
 <input name="csnv_margin_left" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_margin_left'));?>" /> px (number only)
 </td>
 </tr>
            <tr valign="top">
 <td  scope="row">Margin Right:</td>
 <td scope="row">
 <input name="csnv_margin_right" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_margin_right'));?>" /> px (number only)
 </td>
 </tr>
            <tr valign="top">
 <td  scope="row">Margin Top:</td>
 <td scope="row">
 <input name="csnv_margin_top" size="3" maxlength="3" value="<?php echo html_entity_decode(get_option('csnv_margin_top'));?>" /> px (number only)
 </td>
 </tr>
            
            <tr valign="top">
 <td  scope="row">Left banner: <br/><small>Banner hiển thị phía bên trái</small></td>
 <td scope="row">
 <label for="url" >Link</label>
 <input type="text" name="csnv_left_code" id="url" value="<?php echo html_entity_decode(get_option('csnv_left_code')); ?>" style="width:350px; clear:right" /><br /><br />
 <label for="image_url" >Image</label>
     <input type="text" name="image_url_left" id="image_url_left" class="regular-text" value='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_left' ) ); ?>'/>
 <input id="upload_btn_left" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
 <input type='hidden' name='image_attachment_id_left' id='image_attachment_id_left' value='<?php echo get_option( 'media_selector_attachment_id_left' ); ?>' />
 </td>
 <td scope="row"  colspan="2">
 <div class='image-preview-wrapper'>
 <img id='image_preview_left' src='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_left' ) ); ?>' height='100'>
 </div>
 </td>
 </tr>

            <tr valign="top">
 <td  scope="row">Right banner:<br/><small>Banner hiển thị phía bên phải</small></td>
 <td scope="row">
 <label for="url" >Link</label>
 <input type="text" name="csnv_right_code" id="url" value="<?php echo html_entity_decode(get_option('csnv_right_code')); ?>" style="width:350px; clear:right" /><br /><br />
 <label for="image_url" >Image</label>
     <input type="text" name="image_url_right" id="image_url_right" class="regular-text" value='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_right' ) ); ?>'/>
 <input id="upload_btn_right" type="button" class="button" value="<?php _e( 'Upload image' ); ?>" />
 <input type='hidden' name='image_attachment_id_right' id='image_attachment_id_right' value='<?php echo get_option( 'media_selector_attachment_id_right' ); ?>' />
 </td>
 <td scope="row"  colspan="2">
 <div class='image-preview-wrapper'>
 <img id='image_preview_right' src='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id_right' ) ); ?>' height='100'>
 </div>
 </td>
 </tr>
             <tr valign="top">
 <td  scope="row"></td>
 <td scope="row">
 <input type="button" name="save" onclick="document.getElementById('status_submit').value='1'; document.getElementById('csnv_options').submit();" value="Save setting" class="button-primary" />
 <input type="button" name="reset" onclick="document.getElementById('status_submit').value='2'; document.getElementById('csnv_options').submit();" value="Reset to default setting" class="button" />
 </td>
 </tr>

 </table>
        
 </form>
 <?php
}

//add setting menu
add_action('admin_menu', 'csnv_qcao_menu');
/* What to do when the plugin is activated? */
register_activation_hook(__FILE__,'csnv_ads_plugin_install');
/* What to do when the plugin is deactivated? */
register_deactivation_hook( __FILE__, 'csnv_ads_plugin_remove' );

add_action( 'admin_footer', 'media_selector_print_scripts_left' );

function media_selector_print_scripts_left() {

 $my_saved_attachment_post_id = get_option( 'media_selector_attachment_id_left', 0 );

 ?><script type='text/javascript'>
 jQuery(document ).ready( function( $ ) {
 // Uploading files
 var file_frame;
 var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
 var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
 jQuery('#upload_btn_left').on('click',function( event ){
 event.preventDefault();
 // If the media frame already exists, reopen it.
 if ( file_frame ) {
 // Set the post ID to what we want
 file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
 // Open frame
 file_frame.open();
 return;
 } else {
 // Set the wp.media post id so the uploader grabs the ID we want when initialised
 wp.media.model.settings.post.id = set_to_post_id;
 }
 // Create the media frame.
 file_frame = wp.media.frames.file_frame = wp.media({
 title: 'Select a image to upload',
 button: {
 text: 'Use this image',
 },
 multiple: false // Set to true to allow multiple files to be selected
 });
 // When an image is selected, run a callback.
 file_frame.on( 'select', function() {
 // We set multiple to false so only get one image from the uploader
 attachment = file_frame.state().get('selection').first().toJSON();
 // Do something with attachment.id and/or attachment.url here
 $( '#image_preview_left' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
 $( '#image_attachment_id_left' ).val( attachment.id );
 $( '#image_url_left').val(attachment.url)
 // Restore the main post ID
 wp.media.model.settings.post.id = wp_media_post_id;
 });
 // Finally, open the modal
 file_frame.open();
 });
 // Restore the main ID when the add media button is pressed
 jQuery( 'a.add_media' ).on( 'click', function() {
 wp.media.model.settings.post.id = wp_media_post_id;
 });
 });
 </script><?php
}
add_action( 'admin_footer', 'media_selector_print_scripts_right' );

function media_selector_print_scripts_right() {

 $my_saved_attachment_post_id = get_option( 'media_selector_attachment_id_right', 0 );

 ?><script type='text/javascript'>
 jQuery(document ).ready( function( $ ) {
 // Uploading files
 var file_frame;
 var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
 var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
 jQuery('#upload_btn_right').on('click',function( event ){
 event.preventDefault();
 // If the media frame already exists, reopen it.
 if ( file_frame ) {
 // Set the post ID to what we want
 file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
 // Open frame
 file_frame.open();
 return;
 } else {
 // Set the wp.media post id so the uploader grabs the ID we want when initialised
 wp.media.model.settings.post.id = set_to_post_id;
 }
 // Create the media frame.
 file_frame = wp.media.frames.file_frame = wp.media({
 title: 'Select a image to upload',
 button: {
 text: 'Use this image',
 },
 multiple: false // Set to true to allow multiple files to be selected
 });
 // When an image is selected, run a callback.
 file_frame.on( 'select', function() {
 // We set multiple to false so only get one image from the uploader
 attachment = file_frame.state().get('selection').first().toJSON();
 // Do something with attachment.id and/or attachment.url here
 $( '#image_preview_right' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
 $( '#image_attachment_id_right' ).val( attachment.id );
 $( '#image_url_right').val(attachment.url)
 // Restore the main post ID
 wp.media.model.settings.post.id = wp_media_post_id;
 });
 // Finally, open the modal
 file_frame.open();
 });
 // Restore the main ID when the add media button is pressed
 jQuery( 'a.add_media' ).on( 'click', function() {
 wp.media.model.settings.post.id = wp_media_post_id;
 });
 });
 </script><?php
}


Tạo một thư mục và bỏ hai file trên vào rồi nén lại với đuôi .zip

Ví dụ tạo thư mục có tên quangcaohaiben và nén lại với tên file là quangcaohaiben.zip

Như vậy là đã có thể chạy quảng cáo dọc hai bên trang web của bạn một cách chuyên nghiệp rồi. Nếu code bị lỗi gì hay không chạy thì cho mình biết để mình kiểm tra lại nhé.

Link gốc: https://wordpress.org/plugins/float-left-right-advertising/