This is an old revision of the document!
WordPress Plugins from OutlyerNet
Caveat emptor
Here I'll place plugins I've written or modified to fit my needs, but I'm not a WordPress hacker, so I might be re-inventing the wheel for built-in functions or pre-existing, much better plugins.If you know that's the case, please contact me :).
I can't say for sure either if I'm inadvertently breaking something or punching security holes into <abbr title=“WordPress”>WP</abbr> although I can't see any such problems in the code I'm publishing.
Code here is published under the GPL license unless specified otherwise.</p>
Interlinks+
No longer needed
This plugin was integrated back into the main Interlinks so it is deprecated.<p><a href=“files/kd-o-interlinks.php”>Download v1.0a+</a> (last update october 13th 2007)</p>
Interlinks+ is based on Interlinks by Harley. The original adds a very nifty feature: it enables wiki-style interlinks (e.g. [[Some article]]
will be converted to a link to the post/page titled "Some article").
There's a feature I missed in Interlinks: Support for piped links; continuing with the above example, [[Some article|That's a nicer title IMHO]]
would link to "Some article" but the link text will be "That's a nicer title IMHO".
Additionally I added a couple extra modifications to generate valid XHTML, and made the link also display the article's title.
Let's compare Interlinks and Interlinks+:^ ^ Interlinks |^ Interlinks+ || | |
Code | Generated HTML | Rendered HTML | Generated HTML | Rendered HTML | ||
---|---|---|---|---|---|---|
[[My article]] | <a href="http://example.invalid/my-article/">My article</a> | http://example.invalid/my-article/ | <a href=“http://example.invalid/my-article/” title=“My article”>My article</a> | http://example.invalid/my-article/ | ||
[[My article|My first article]] | * <font color='red'>My article</font> | My first article</font> | My article | My first article | <a href=“http://example.invalid/my-article/” title=“My article”>My first article</a> | http://example.invalid/my-article/ |
* Broken | * <font color='red'>Broken</font> | Broken | * Broken |
<dfn class=“tt”>*</dfn> indicates a broken interlink
<table style=“width:100%;padding:0;margin:0;border:1px solid black;font-size:small;”>
<!– End of Interlinks+ –>
Relative URLs
<p><a href=“files/net_outlyer_wp-relativeurls.php”>Download v1.5</a> (last update october 14th 2007)</p>
<p><em>Relative <abbr title=“Uniform Resource Locator”>URL</abbr>s</em> (hereon <abbr title=“Relative URLs”>RU</abbr>) is mainly targeted at people with a <strong>local copy</strong> of their WordPress site and those that <strong>reorganise and/or change their pages hierarchy often</strong> although many standard installations can also take advantage of it.</p>
<p><abbr title=“Relative URLs”>RU</abbr> can be seen as kind of complementary to Interlinks: It creates a valid URL or link from a relative path. <br /> If you want to link to a post Interlinks or Interlinks+ are better alternatives, but if you want to link to a given file in your site none of them will help you. <br /> I guess so far it isn't clear what's the need for such a plugin, so let's clarify a bit, note that:</p>
<ul><li>Pages can be accessed from more than one URL (I'm assuming your WordPress installation is in a subdirectory and URL redirection is being used): <ul>
<li><samp>http://example.com/parentpage/page/</samp></li> <li><samp>http://example.com/wordpress/parentpage/page/</samp></li> <li><samp>http://example.com/wordpress/?page_id=2</samp></li>
</ul> </li>
<li>Using an absolute URL to refer to stuff in the site has the potential of being broken if you <ul>
<li>Change WordPress' path, e.g.: <samp>http://example.com/wordpress/</samp> is moved to <samp>http://example.com/</samp> or <samp>http://example.com/blog/</samp>. </li> <li>Change your (sub)domain, e.g. <samp>http://example.com/</samp> becomes <samp>http://blog.example.com/</samp>.</li>
</ul> </li>
<li>Using a relative URL to refer to stuff in the site has the potential of being broken if you (or visitors) <ul>
<li>Access from a different URL, e.g.: A relative URL like <samp>images/im.jpg</samp> will point to different things when accessed from <samp>http://example.com/parentpage/page</samp> (<samp><var>http://example.com/parentpage/page/images/im.jpg</var></samp>) and <samp>http://example.com/wordpress/?page_id=2</samp> (<samp><var>http://example.com/wordpress/images/im.jpg</var></samp>). </li>
</ul> </li> </ul>
<p>Finally, if you use a local copy of WordPress to test stuff, chances are your local copy would have quite a different URL, e.g. <samp>http://localhost/~username/wordpress/</samp> and you might want your URLs to point to the local copy and not the on-line site.</p>
<h3 id=“ru-usage”>Usage</h3><!– of Relative URLs –>
<p>Enclose your local URL in double braces (e.g. <samp>url</samp>), to get a full URL generated dinamically, e.g. to <samp>http://example.com/wordpress/myrelative/url</samp>.</p>
<p>Enclose your local URL in double braces along a text description (separated by a space) to get a dinamically generated link to the full URL. <br /> <samp>file.txt_the_text_file</samp> would become <samp><a href="http://example.com/wordpress/the_url/file.txt">The text
file</a></samp>.
<br /><br /> Note you'll have to encode any spaces in the url (e.g. to link to "<samp>the file</samp>" you'll have to encode the space (replace it with <kbd>%20</kbd>) i.e.: <samp>the_20file</samp>.</p>
<h4 id=“ru-escape”>Escaping <em>Relative URLs</em></h4>
<p>If you want to write literal double curly brackets (<kbd>{{</kbd>) then you'll have to use an html entities such as <samp>&#x7b;</samp> and <samp>&#x7d;</samp> (or <samp>&#123;</samp> and <samp>&#125;</samp>). For maximum security use at least on each end, e.g. <samp>&#x7b;{ whatever &#x7d;}</samp> will be parsed correctly as <samp>{{ whatever }}</samp>. <br /> BUT beware of the visual editor in WordPress (although if you use it you're probably used to fight it ;).</p> <!-- End of Relative URLs --> ===== JS Base2 ===== <p><a href="files/js-base2-1.0+0.9a.tar.gz">Download v1.0+0.9a</a> (last update october 24th 2007). (Note <var>1.0</var> is the plugin version and <var>0.9a</var> is the base2's version used in the plugin).</p> <p>A completely trivial plugin that loads <a href="http://dean.edwards.name">Dean Edwards'</a> <strong>base2</strong> JavaScript library (see <a href="http://dean.edwards.name/weblog/2007/03/yet-another">[1]</a> and <a href="http://code.google.com/p/base2/">[2]</a>).</p> <p>This library is mostly a cross-browser fix of the <abbr title="Document Object Model">DOM</abbr> plus a selectors <abbr title="Aplication Programming Interface">API</abbr> implementation (allowing selection from <abbr title="JavaScript">JS</abbr> with <abbr title="Cascading Style Sheets">CSS</abbr> selectors).</p> <p>It is used by the following plugin :)</p> <!-- End of JS Base 2 --> ===== JS Syntax Highlighter ===== <p><a href="files/js-syntax-highlighter-0.2.tar.gz">Download v0.2</a> (last update october 25th 2007).</p> <p>This plugin loads <a href="http://code.google.com/p/syntaxhighlighter/">Alex Gorbatchev's</a> <strong>SyntaxHighlighter</strong> JavaScript script. With a twist :)</p> <p>SyntaxHighlighter is a script that will highlight code from JavaScript when marked appropriately, hence allowing you to post raw code that will be automagically prettyprinted on load. <br /> I needed a couple workarounds to use it on my site and they were the motivation for this plugin: </p> <dl> <dt>First problem: Code must be enclosed in either a <code><pre></code> or a <code><textarea></code> tag, with their <code>name</code> attribute set to certain (user-selectable) value. <br /> The problem is, <code><pre></code> has no <code>name</code> attribute so the page wouldn't validate.</dt> <dd style="margin-bottom:1em"><strong>My solution:</strong> (Note I opted to not modify SyntaxHighlighter code) Mark code with a class and then, on-the-fly, add the name attribute from JavaScript (this makes the HTML validate as the invalid attribute is only created in-memory).</dd> <dt>Second problem: Each supported language has its own associated JavaScript file which you should load when writing code for a that language. I felt loading them site-wide was was overkill (and I don't know which languages I might need), while loading them as needed, in the article body felt cumbersome.</dt> <dd><strong>My solution:</strong> Load the common script, see if any languages are needed and load them dinamically. As a side effect the page will load faster (the required languages are loaded after the page ended loading).</dd> </dl> <p>So <strong>in short</strong> this plugin loads SyntaxHighlighter allowing your pages to validate and only loading language files as needed.</p> <p>I also changed the CSS file a bit to use fonts I consider look better and added colours to <var>functions</var> and <var>variables</var>.</p> <h3 id="jsh-usage">Usage</h3> <p>Plugin installation:</p> <ol> <li>Decompress in the <code>wp-content/plugins</code> folder, it will create its own folder.</li> <li>Activate it from <abbr title="WordPress">WP</abbr>'s admin panel.</li> </ol> <p>Syntax highlighting:</p> <ol> <li>Wrap your code in a <pre> or <textarea> with class '<code>syntax-highlight</code>' and the appropriate class for the language of the block, e.g. '<code>cpp</code>' for C++ (see <a href="http://code.google.com/p/syntaxhighlighter/wiki/Languages">the full list</a>).</li> <li>There's no step 2 :P But remember the highlighting takes place a bit after loading the page.</li> </ol> <h4 id="jsh-no-base2">Usage without <em>base2</em></h4> <p>I dropped support for such a situation. You can try with an older version of loader.js but keep in mind that then languages <strong>won't be autoloaded</strong>.</p> <h3 id="jsh-caveats">Caveats of the current version</h3> <h4 id="jsh-passing-options">Passing options for a single block</h4> <p>Passing options for a block to SyntaxHighlighter needs a workaround as my loader won't detect the language then, the workaround is to use a hidden, empty block without options, i.e:<br /> If you want to have something like</p> <!-- Ensure correct loading of language file --> <div style="display:none !important;"><pre class="syntax-highlight html javascript"></pre></div> <pre class="html:nogutter syntax-highlight"> <pre class="syntax-highlight javascript:firstline[10]"> function doSomething() { } </pre> </pre> <p>Then you'll need to add a hidden block with the language class(es) needed. That block can have the classes of all needed languages:</p> <pre class="html:nogutter:firstline[5] syntax-highlight"> <!-- Hidden, meaningless, code block --> <div style="display:none !important;"> <pre class="syntax-highlight html cpp"></pre> </div> </pre> <h4 id="jsh-disabled-aliases">Disabled language aliases</h4> <p>Due to the way the code is written the following language name aliases won't be looked for (all of them have alternatives): <code>c++</code>, <code>c#</code>, <code>vb.net</code>.</p> <p>They could be enabled with some escaping but I didn't feel the need :p</p> <h3 id="jsh-config">Customisation</h3> <p>There're a couple things you might want to tweak, to change them edit the file <code>loader.js</code> (note that the version actually loaded in the browser is the one in the <code>js/</code> directory, but it is shipped packed with <a href="http://dean.edwards.name/packer/">Dean Edwards' packer</a>, which makes it quite harder to edit. I suggest you to edit the version in the <code>full-js/</code> directory and once you're happy with it pack it again.</p> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-base2/base2-dom-fp.js"></script> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/shCore.js"></script> <script type="text/javascript" src="http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter/js/loader.js"></script> <script type="text/javascript"> dpLoader.init('http://outlyer.net/site/wp-content/plugins/js-syntax-highlighter'); </script> <pre class="syntax-highlight javascript:firstline[19]"> bloggerMode: false, // Set to true if the blogging software adds <br />'s // See: <http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode> opts: [ // Options for HighlightAll, see <http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll> true, // Show Gutter false, // Show Controls (!*not default*) false, // Collapse all 1, // First line false // Show columns ], WAIT_TO_LOAD: 200, // (ms) Period to wait between checks for language loading FAIL_TIMEOUT: 120000, // (ms) After this period will stop trying to load languages </pre> <p>These are the meaningful variables, I think they're self explanatory enough, a note of warning though: if some of the languages fails loading you'll have to wait for <code>FAIL_TIMEOUT</code> milliseconds before syntax highlighting gets enabled. Set it too low, though, and you'll get bogus failures.</p> <!-- End of JS Syntax Highlighter --> <hr style="margin-top:1em;" /> <footer> <div class="footer"> <address>© 2007 <span id="email">Toni Corvera <outlyer at gmail dot com></span> <br /> <span class="tiny">[<a href="http://outlyer.net./pubkey.asc">GPG Key</a>]</span></address> <br /> <aside><address> Other than by e-mail, you can leave your comments about any of these plugins in the <a href="http://outlyer.net/codigo/wordpress/" hreflang="es">WordPress code</a> page in my site. </address></aside>