Example #1
0
function wpcufon_settings_page()
{
    ?>
	
	<!-- Messages -->
    <?php 
    if (!empty($_POST)) {
        ?>
	    <div id="message" class="updated fade"><p><strong><?php 
        _e('Options saved.');
        ?>
</strong></p></div>
    <?php 
    }
    ?>
    
    <?php 
    if (!is_dir(WP_PLUGIN_DIR . "/fonts")) {
        ?>
		<div id="message" class="updated fade"><p><strong>Please create the /fonts/ Directory in /wp-content/plugins/</strong></p></div>
    <?php 
    }
    ?>
    
    <div class="wrap">
    <h2>Cuf&oacute;n Administration</h2>
    
    <div class="narrow">
    This Plugin enables Cuf&oacute;n in your WordPress Blog. (<a href="http://wiki.github.com/sorccu/cufon" target="_blank">More Info</a>)<br />
    </p>	
    <p>&nbsp;</p>
    <h3>How to generate & activate the fonts</h3>
    <ul>
      <li><small>First you have to convert your font-file (.ttf, .otf) into a Cuf&oacute;n compatible format.<br />You can do this by using Cuf&oacute;n's own generator at <a href="http://cufon.shoqolate.com/generate/" target="_blank">http://cufon.shoqolate.com/generate/</a></small></li>
      <li><small>In the next step you must create the directory /fonts/ in /wp-content/plugins </small></li>
      <li><small>Then upload your <em>.font.js</em> font-files to <span class="code">/wp-content/plugins/fonts/</span><br />The Plugin will recognize your uploaded fonts and activate them.</small>
      </li>
      <li><small>You can move the &quot;Vegur&quot; Fontfile from /examples/ to your new ../fonts/ directory for testing!</small></li>
      <li><small>If your font doesn't get recognized check the exact font-family FontName in your fontfile and set it right in your replacement code!<br />Check the first line in your font.js file to get the fontName (see <b>bold</b> example below).</small></li>
      <li><small>Example: (in a font.js file) <span class="code">Cufon.registerFont({"w":205,"face":{"font-family":"<b>Vegur Bold</b>", ...</span></li>
    </ul>
    <p>&nbsp;</p>
    
    <h3>Your Fonts</h3>
    <?php 
    wpcufon_set_font();
    ?>
    <p>&nbsp;</p>
    
    <h3>Set the font-replacements</h3>
    <small>
        <b>Easy Example:</b><br />
        <span class="code">
            Cufon.replace('h1', { fontFamily: 'Vegur' });
        </span>
        
        <br /><br />
        
        <b>Replace with different fonts:</b><br />
        <span class="code">
            Cufon.replace('h1', { fontFamily: 'Vegur' });<br />
            Cufon.replace('h2', { fontFamily: 'Vollkorn Heavy Condensed' });
        </span>
        
        <br /><br />
        
        <b>Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)</b><br />
        <span class="code">
            Cufon.replace('#your_div_id > h1:first-child', { fontFamily: 'FontName With Spaces' });<br />
            Cufon.replace('#your_div_id a', { fontFamily: 'FontName' });<br />
            Cufon.replace('#your_div_id', { fontFamily: 'FontName-Medium' });
        </span>
        
        <br /><br />
        
        <b>Another Example now with Cufon.set fontFamily</b><br />
        <span class="code">
            Cufon.set('fontFamily', 'Vegur');<br />
            Cufon.replace('#blog-title a', { hover: true });<br />
            Cufon.replace('.menu a', { hover: true, fontWeight: '800' });<br />
            Cufon.replace('.aside h3');<br />
            Cufon.replace('h1.page-title' , { fontWeight: '400' });<br />
            Cufon.replace('h1.entry-title', { fontWeight: '400' });<br />
            Cufon.replace('h2.entry-title', { fontWeight: '400', hover: true });<br />
        </span>
        
        
        
        &raquo; <a href="http://wiki.github.com/sorccu/cufon/styling" target="_blank">Get more styling hints</a>
    </small>
    <br /><br />
    <?php 
    wpcufon_set_font_replacements();
    ?>
    
    </div><!-- narrow -->   
    </div><!-- wrap -->

<?php 
}
Example #2
0
function wpcufon_settings_page()
{
    ?>
	
	<!-- Messages -->
    <?php 
    if (!empty($_POST)) {
        ?>
	    <div id="message" class="updated fade"><p><strong><?php 
        _e('Options saved.');
        ?>
</strong></p></div>
    <?php 
    }
    ?>
    
    <?php 
    if (!is_dir(WP_PLUGIN_DIR . "/fonts")) {
        ?>
		<div id="message" class="updated fade"><p><strong>Please create the /fonts/ Directory in /wp-content/plugins/</strong></p></div>
    <?php 
    }
    ?>
    
    <div class="wrap">
    <h2>Cuf&oacute;n Administration</h2>
    
    <div class="narrow">
    This Plugin enables <a href="http://wiki.github.com/sorccu/cufon" target="_blank">Cuf&oacute;n</a> in your WordPress Blog.<br />       
    </p>	
   
    
    <h3>--<br />Tutorial</h3>
    <img src="<?php 
    echo WP_PLUGIN_URL;
    ?>
/wp-cufon/help.png" align="bottom" /> <a href="javascript:void(0);" id="tutorial_button">Show Tutorial</a><br /><br />
    
    <div id="tutorial">    
    <h3>How to generate & activate the fonts</h3>
    <ul style="list-style:outside; list-style-type:disc;padding-left:15px;">
      <li><small>First you have to convert your font-file (.ttf, .otf) into a Cuf&oacute;n compatible format.<br />You can do this by using Cuf&oacute;n's own generator at <a href="http://cufon.shoqolate.com/generate/" target="_blank">http://cufon.shoqolate.com/generate/</a></small></li>
      <li><small>In the next step you must create the directory /fonts/ in /wp-content/plugins </small></li>
      <li><small>Then upload your <em>.font.js</em> font-files to <span class="code">/wp-content/plugins/fonts/</span><br />The Plugin will recognize your uploaded fonts and activate them.</small>
      </li>
      <li><small>You can move the &quot;Vegur&quot; Fontfile from /examples/ to your new ../fonts/ directory for testing!</small></li>
      <li><small>If your font doesn't get recognized check the exact font-family FontName in your fontfile and set it right in your replacement code!<br />Check the first line in your font.js file to get the fontName (see <b>bold</b> example below).</small></li>
      <li><small>Example: (in a font.js file) <span class="code">Cufon.registerFont({"w":205,"face":{"font-family":"<b>Vegur Bold</b>", ...</span></small></li>
    </ul>
    <p>&nbsp;</p> 
    
    <h3>Set the font-replacements</h3>
    <small>
        <b>Easy Example:</b><br />
        <span class="code">
            Cufon.set('fontFamily', 'Amaze').replace('h1')('h2');
        </span>
        
        <br /><br />
        
        <b>Replace with different fonts:</b><br />
        <span class="code">
            Cufon.set('fontFamily', 'NiftyFont');<br /><br />
			
            Cufon.replace('#welcome');<br />
            Cufon.replace('#sidebar h2');<br />
            Cufon.replace('#content .title');<br /><br />
            
            Cufon.set('fontFamily', 'AnotherNiceFont');<br />
            
            Cufon.replace('h4');<br />
            Cufon.replace('.quote');<br />
            Cufon.replace('#message');
        </span>
        
        <br /><br />
        
        <b>Access via JavaScript frameworks: (e.g. jQuery needs to be enabled)</b><br />
        <span class="code">
            Cufon.replace('#your_div_id > h1:first-child', { fontFamily: 'FontName With Spaces' });<br />
            Cufon.replace('#your_div_id a', { fontFamily: 'FontName' });<br />
            Cufon.replace('#your_div_id', { fontFamily: 'FontName-Medium' });
        </span>
        
        <br /><br />
        
        <b>Other Examples:</b><br />
        <span class="code">
            Cufon.set('fontFamily', 'Vegur');<br />
            Cufon.replace('#blog-title a', { hover: true });<br />
            Cufon.replace('.menu a', { hover: true, fontWeight: '800' });<br />
            Cufon.replace('.aside h3');<br />
            Cufon.replace('h1.page-title' , { fontWeight: '400' });<br />
            Cufon.replace('h1.entry-title', { fontWeight: '400' });<br />
            Cufon.replace('h2.entry-title', { fontWeight: '400', hover: true });<br />
        </span>
        
        &raquo; <a href="http://wiki.github.com/sorccu/cufon/styling" target="_blank">Get more styling hints</a>        
        <br />  <br />      
        <span style="color:red;">&raquo; If nothing works try to rename your font.js file and your font-family string to the same name and don't use any blanks!</span>
        <br />
        &raquo; For questions about Cuf&oacute;n please visit the <a href="http://groups.google.com/group/cufon" target="_blank">Google Group!</a>
        <br /><br />
        &raquo; Please do not use copyrighted fonts!
        <br />
        &raquo; Cuf&oacute;n is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License" target="_blank">MIT license</a> by Simo Kinnunen.
    </small>
        
    </div> <!-- /tutorial -->   
       
   <h3>--<br />Your Fonts</h3>
    <?php 
    wpcufon_get_fonts();
    ?>
    <p>&nbsp;</p>
   
   
    <?php 
    wpcufon_set_font_replacements();
    ?>
    
    </div><!-- narrow -->   
    </div><!-- wrap -->

<?php 
}