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.

These are plugins I wrote for my personal use, I've tried to make them usable by others before publishing but there're some rough edges.

Code here is published under the GPL license unless specified otherwise.</p>

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+:

<dfn class=“tt”>*</dfn> indicates a broken interlink

<table style=“width:100%;padding:0;margin:0;border:1px solid black;font-size:small;”>

<colgroup> <col /> <col style=“background-color:#666;” /> <col /> <col style=“background-color:#666;” /> <col /> </colgroup>

<thead> <tr> <th></th> <th colspan=“2” style=“background-color:#333;”>Interlinks</th> <th colspan=“2” style=“background-color:#333;”>Interlinks+</th> </tr> <tr style=“border-bottom:1px solid black;”> <th>Code</th> <th>HTML</th><th>parsed as</th> <th>HTML</th><th>parsed as</th> </tr> </thead>

<tbody> <tr> <td>

[[My article]]

</td> <td>

&lt;a href=&quot;http://example.invalid/my-article/&quot;&gt;My article&lt;/a&gt;

</td> <td><a href=“http://example.invalid/my-article/”>My article</a></td> <td>

&lt;a href=&quot;http://example.invalid/my-article/&quot; title=&quot;My article&quot;&gt;My article&lt;/a&gt;

</td> <td><a href=“http://example.invalid/my-article/” title=“My article”>My article</a></td> </tr>

<tr> <td>

[[My article|My first article]]

</td> <td><dfn class=“tt”>*</dfn>

&lt;font color='red'&gt;My article|My first article&lt;/font&gt;

</td> <!– Note that to make this page validate I can't actually use font –> <td>My article|My first article</td> <td>

&lt;a href=&quot;http://example.invalid/my-article/&quot; title=&quot;My article&quot;&gt;My first article&lt;/a&gt;

</td> <td><a href=“http://example.invalid/my-article/” title=“My article”>My first article</a></td> </tr>

<tr> <td><dfn class=“tt”>*</dfn>

[[Broken]]

</td> <td><dfn class=“tt”>*</dfn>

&lt;font color='red'&gt;Broken&lt;/font&gt;

</td> <td><dfn class=“tt”>*</dfn> Broken</td> <td><dfn class=“tt”>*</dfn>

&lt;span style=&quot;color:red;&quot; title=&quot;Broken&quot;&gt;Broken&lt;/span&gt;

</td> <td><dfn class=“tt”>*</dfn> Broken</td> </tr> </tbody> </table>

I'm assuming default page <em>slugs</em> here.

<p>I'm contacting Harley now to suggest her adopting my modifications (at least piped links and XHTML conformance), so with any luck this plugin will be ill-fated :).</p>

<!– End of Interlinks+ –>

<h2 id=“relative-urls”>Relative URLs</h2>

<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>&lt;a href=&quot;http://example.com/wordpress/the_url/file.txt&quot;&gt;The text

file&lt;/a&gt;</samp>.

<br /><br /> Note you'll have to encode any spaces in the url (e.g. to link to &quot;<samp>the file</samp>&quot; 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>&amp;#x7b;</samp> and <samp>&amp;#x7d;</samp> (or <samp>&amp;#123;</samp> and <samp>&amp;#125;</samp>). For maximum security use at least on each end, e.g. <samp>&amp;#x7b;{&nbsp;whatever&nbsp;&amp;#x7d;}</samp> will be parsed correctly as <samp>&#x7b;{&nbsp;whatever&nbsp;&#x7d;}</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 --> <h2 id="js-base2">JS Base2</h2> <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 --> <h2 id="js-syntax-highlighter">JS Syntax Highlighter</h2> <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>&lt;pre&gt;</code> or a <code>&lt;textarea&gt;</code> tag, with their <code>name</code> attribute set to certain (user-selectable) value. <br /> The problem is, <code>&lt;pre&gt;</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 &lt;pre&gt; or &lt;textarea&gt; 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"> &lt;pre class=&quot;syntax-highlight javascript:firstline[10]&quot;&gt; function doSomething() { } &lt;/pre&gt; </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"> &lt;!-- Hidden, meaningless, code block --&gt; &lt;div style=&quot;display:none !important;&quot;&gt; &lt;pre class=&quot;syntax-highlight html cpp&quot;&gt;&lt;/pre&gt; &lt;/div&gt; </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 &lt;br /&gt;'s // See: &lt;http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode&gt; opts: [ // Options for HighlightAll, see &lt;http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll&gt; 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>&copy; 2007 <span id="email">Toni Corvera &lt;outlyer at gmail dot com&gt;</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>

All dates/times in this page are UTC.
  • wordpress.1495115948.txt.gz
  • Last modified: 2017/05/18 13:59
  • by Toni Corvera